Search code examples
phphtmltextprogress-bar

Display text on bootstrap progress bar if bar is empty

So I have a bootstrap progress bar where text is displayed within the bar - I've noticed that the text only shows if the bar has SOME amount of fill, but if the bar is empty, the text isn't shown?

How can I edit this HTML to show the text inside the bar if the bar is empty as well as full or anywhere in between? 

 <div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%;">
    This is my text
  </div>
</div>
Solution

  • From the Bootstrap Docs

    To ensure that the label text remains legible even for low percentages, consider adding a min-width to the progress bar.

    enter image description here

    <div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
    2%
  </div>
</div>

    In your case, perhaps something like this would work:

    <div class="progress">
  <div class="progress-bar" role="progressbar" 
     aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" 
     style="min-width: 20%"> <!-- or use ems/pixels -->
    This is my text
  </div>
</div>