Harnessing the power of Bootstrap 4: Adding text and icons to your <progress> bars

I'm attempting to add an icon overlay on a progress bar within Bootstrap 4 alpha.

<progress class="progress progress-primary" value="100" max="100">
  <i class="fa fa-check-circle-o"></i>
</progress>

The desired outcome should resemble the following (approximately):

https://i.sstatic.net/t3wmi.png

However, the actual result appears like this:

https://i.sstatic.net/nRTgk.png

Despite trying various combinations of appearance:initial; and !important declarations, I can't seem to resolve the issue.

What key detail am I overlooking that is causing the text within the <progress> element to remain invisible?

csstwitter-bootstraptwitter-bootstrap-4

Answer №1

To create more space, relocate the icon outside of the progress element and apply position:relative.

<progress class="progress" value="10" max="100"></progress>
<i class="fa fa-check-circle-o"></i>

.fa {
    position: relative;
    z-index: 2;
    top: -35px;
    left: 50%;
}

Explore the code snippet here

Answer №2

The most recent update of Bootstrap 4, known as alpha-6, has resolved this issue:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Menu with full-width navigation and dropdown options

I am trying to create a navigation menu with a black background that spans the full width of the window. To achieve this, I have placed the ul element inside a div with overflow: hidden; set. However, I am facing issues where hovering over submenus causes ...

htmlcssnavigation

Creating a circular border link button: Step-by-step guide

Struggling to create a link that resembles a button with partially rounded edges in a semi-circumference shape? You're not alone The issue arises when the radius ends up impacting the entire button's diameter, altering its intended appearance D ...

htmlcssbootstrap-4rounded-corners

What is the best way to include a secondary border to a responsive textarea?

Currently, I am utilizing Twitter Bootstrap 3.2.0 and below is the code snippet: Click here for jsFiddle .textarea textarea { background-color: white; background-image: url("http://ello.96.lt/images/as.jpg"); line-height: 1.56em; p ...

twitter-bootstrapcss

Creating a simulated dropdown menu using only CSS

I was able to create a select menu using only CSS, following some code I found. However, I am now facing an issue with overlaying divs. Whenever I hover or click on the "select menu", all the divs below it move down. I've attempted to adjust the z-i ...

htmlcssdrop-down-menu

Issue with Dependent Drop Down functionality

I am a beginner explorer diving into the world of PHP & MySQL, and I am currently working on creating a dependent drop-down list. The first drop-down seems to be working fine, but I am facing issues linking the second drop-down with the first one. Can anyo ...

phphtmlcssmysqlapache

How can I ensure a header is displayed on each page by utilizing CSS or JavaScript/jQuery?

On a lengthy page with approximately 15 pages of text, I would like to insert a header at the beginning of each page when the document is printed by the user. Can this functionality be achieved using CSS or JavaScript/jQuery? ...

javascriptjquerycss

Is there a way to trigger the bootstrap datetimepicker when a custom button is clicked, while also storing the selected value in a hidden textbox

When the ADD button is clicked, a datetimepicker should open. After selecting a value from the datetimepicker, it should be saved in the textbox with ID #myTextBox. <div> <input id="myTextBox" type="text" ng-model="c" data-provide="datepicker ...

javascriptjqueryangularjstwitter-bootstrap

Why is the right float positioned below the container?

I am struggling to figure out why my float: right; div is appearing below the container div. I need help understanding how to resolve this issue. Can anyone provide an explanation? I faced a similar problem on a different website in the past, but I can&apo ...

htmlcss

What are the features of the vertical line with annotation plugin and category axis in Chart.js?

I am currently facing an issue with the vertical line in my chart created using chart.js. Specifically, the problem lies with the category axis where the years are labeled as [year 0, year 1, year 2, year 3..]. Here is an example of a functioning chart ...

javascriptjqueryhtmlcsscharts

Can you guide me in inserting space between two images along with headers and paragraphs utilizing bootstrap?

Trying to recreate a portfolio design from Codewell for practice, but struggling to create space between images without them stretching and the text disappearing. Even using display: flex and justify-content: space-between ends up stretching the images. I ...

htmlcssflexboxbootstrap-5

Transforming HTML features into PHP scripts. (multiplying two selected values)

I am currently working on converting these JavaScript functions into PHP in order to display the correct results. I need guidance on how to use PHP to multiply the values of the NumA and NumB select options, and then show the discount in the discount input ...

javascriptphphtmlcss

What is the best way to target the final n children using CSS?

Is there a way in CSS to target and style the last N elements of a parent container? The number of elements we want to match is not fixed, but could vary. How can this be achieved using CSS? ...

csscss-selectors

The color of the bootstrap button appears incorrect on Chrome browser (Mac) for some reason

I was in need of a grey color for my button, so I opted for the Bootstrap button which helped me achieve my desired look. However, an issue arose when viewing it on Chrome on a Mac system - it displayed a white background instead of grey. Can someone prov ...

htmlcsstwitter-bootstrapgoogle-chromebootstrap-4

Optimize the layout with Grid CSS to allow the last two items to dynamically occupy

I've been working on a layout that looks like this: X X X X X X X X A B Currently, I have used grid-template-columns: repeat(4, 1fr); to define the columns. However, what I actually want is for the last two items to take up the full width of the rem ...

csscss-grid

Collapse the accordion by sliding it back to the top position

I have successfully implemented the Flexible Slide-to-top Accordion on my webpage. Initially, I struggled with the functionality to have only one accordion open at a time due to my limited knowledge of jQuery. However, after overcoming this challenge, I n ...

jqueryhtmlioscssaccordion

Hover effects in CSS using z-index are causing the displacement of divs

Whenever I hover over the first div to reveal the entire text, the second div's position shifts to go behind it. My goal is to have the second div stay in place, allowing the text from the first div to overlap it. Check out the demo here: https://cod ...

htmlcssz-index

Why dashes are incompatible with inner <span> elements?

Is there a way to make hyphens work on text with <span> elements for highlighting without breaking the algorithm? I don't want a workaround like &shy;. https://i.sstatic.net/JGl1M.png The Code (sandbox: https://codepen.io/anon/pen/ayzxpM): ...

csscss-hyphens

Guide to positioning a card in the middle of a container using Bootstrap

I am struggling to center a card inside a container using CSS properties like justify-content-center, mx-auto, and hardcoding. However, I have not been able to achieve the desired result. Here is the code snippet from my HTML file: <div class="cont ...

htmlcssbootstrap-4frontendbootstrap-5

What is the best way to differentiate the behavior of two identical classes using a single JavaScript function?

Can someone help me figure out how to make two circles move differently with the same JavaScript function? I'm new to JavaScript and struggling to differentiate between classes in HTML to achieve this. My goal is to have each circle move randomly and ...

javascripthtmlcss

Tips for ensuring all images are the same size within a div element

https://i.stack.imgur.com/EkmWq.jpg Is there a way to make sure all the images fit perfectly inside their respective border boxes without appearing stretched? I've tried setting fixed height and width within a div, but they always end up looking off. ...

javascripthtmlcssstyled-components