CODEWITHSUNDEEP
csstwitter-bootstrap
maxcountryman
maxcountryman

Reputation: 1759

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?

Upvotes: 3

Views: 5455

Answers (2)

Baz
Baz

Reputation: 36894

Why not use Bootstrap's built-in flex utility classes? Here's a codepen

<div class="container">
    <div class="progress">
      <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="d-flex justify-content-between">
        <div>Start</div>
        <div>End</div>
    </div>
</div>

No extra css required.

Upvotes: 2

Rachel S
Rachel S

Reputation: 3920

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

Upvotes: 4

Related Questions