Basic Progress Bar

To create a default progress bar, add a .progress class to a container element and add the progress-bar class to its child element. Use the CSS width property to set the width of the progress bar:

Bootstrap Example

Progress Bar Height

The height of the progress bar is 1rem (16px) by default. Use the CSS height property to change the height:



Bootstrap Example

Progress Bar With Label

70%
Bootstrap Example

Colored Progress Bars

Use any of the contextual color classes to change the color of the progress bar:









Bootstrap Example

Striped Progress Bars

The .progress-bar-striped class adds stripes to the progress bars:





Bootstrap Example

Animated Progress Bar

Add the .progress-bar-animated class to animate the progress bar:

Bootstrap Example

Multiple Progress Bars

Create a stacked progress bar by placing multiple bars into the same div with class="progress":

Free Space
Warning
Danger