Holla Tech - Learn
Bootstrap 3: Progress Bars
 

A basic Bootstrap progress bar can be created as follows:
1. Create a <div> element with progress class.
2. Inside the progress div just created, create a <div> element with progress-bar class and role=”progressbar” property. Set its CSS width property to the progress value of the progress bar. For example, style=”width:59%”.

The value, min, max attributes of the general HTML progress bar should be aria-valuenow, aria-valuemin, aria-valuemax attributes, respectively.

Additional styling can be added with these classes: progress-bar-info, progress-bar-success, progress-bar-warning, progress-bar-danger, progress-bar-striped

To create a stacked progress bar, place multiple progress bars in the same <div class=”progress”> element.

The code below displays some Bootstrap styled progress bars: 

<div class=“container”>
  <div class=progress>
    <div class=progress-bar role=“progressbar” aria-valuenow=“59” aria-valuemin=“0” aria-valuemax=“100” style=width:59%>59% Complete!</div>
  </div>
  <div class=progress>
    <div class=progress-bar progress-bar-success role=“progressbar” style=width:50%>50</div>
    <div class=progress-bar progress-bar-warning role=“progressbar” style=width:25%>25</div>
    <div class=progress-bar progress-bar-danger role=“progressbar” style=width:10%>10</div>
  </div>
</div> 

 

The aria-* attributes are not required, but when available, the Accessible Rich Internet Applications technology can be interpreted by assistive technologies, such as screen readers.

TASK:
Test the line of codes in a text editor to play around with the output and see Bootstrap progress bars in action.

BACK NEXT

CLICK ON THE BUTTON BELOW TO RETURN TO THE BOOTSTRAP 3 MAIN COURSE PAGE. 

BOOTSTRAP 3 MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT