maxcountryman maxcountryman - 2 months ago 6
CSS Question

How can I add a start and end label to Bootstrap's progress bars?

I'd like to label my progress bars with a start and end label, directly below the progress bar.

For example:

[||||||||------------]
<Start Label> <End Label>


However I can't seem to find a simple way of doing this. Does Bootstrap support this or would I need to write some custom CSS to attach these labels?

Answer

Bootstrap doesn't come with labels there. Their version of labels is the text inside the progress bar that reads, for example, 60%. You can try something like this with CSS:

http://www.bootply.com/eZ9fFZwtmO

<div class="col-sm-6"><div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>
  <div class="start">Start</div>
   <div class="end">End</div>
</div>

CSS:

.progress {margin-bottom:0;}
.start {float:left;}
.end {float:right; text-align:right;}