troytc troytc -4 years ago 152
CSS Question

Bootstrap 4 – Text/Icon on <progress> element

I am trying to overlay an icon on a progress bar in the Bootstrap 4 alpha.

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


It should look like the following (roughly):

Desired Result

Instead, I end up with the following:

Actual Result

Unfortunately, no combination of
appearance:initial;
and
!important
tags are doing the trick.

What am I missing that is causing the text within the
<progress>
element to not show?

Answer Source

In the latest version of Bootstrap 4, alpha-6, this issue isn't a problem anymore:

<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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download