Bootstrap Progress Bars

The progress of any process can be visually represented using the progress bar element.

You can use it to show the progress of any web-page loading or while completing a transaction process.

Here we will discuss more about the progress bar element and how Bootstrap can help us control its different features.

Bootstrap Basic Progress Bar

A default progress bar can be created using following two contextual classes:

  • .progress: Used with the container element like <div>
  • .progress-bar: To be used with the child element of the container element.

The width of the progress bar can be adjusted using the CSS width property. The progress representation will be made accordingly.

Basically, the width is increased as per the process flow, representing the progress to the user.

The below code shows the creation of a basic progress bar:

Bootstrap Progress Bar Height

The default height of the progress bar is 16px.

Just like the width of the progress bar you can also use the CSS height property to change the height to a desired value.

Please note, that the height for the progress container and the progress bar must be set as same.

See the code below for illustration:

Bootstrap Progress Bar Labels

For providing better readability to the user, we can show the progress percentage by adding some text content in the progress bar.

See the code below for example:

 

     
70%

Bootstrap Colored Progress Bars

The default color of the progress bar is set to blue (primary).

For setting a desired color, you choose among the various Bootstrap contextual classes fro different background colors.

See the code below for example:

Bootstrap Striped Progress Bars

You can also add stripes to the progress bars. The .progress-bar-striped class can be used for this task.

The following code is an example for same:

Bootstrap Animated Progress Bar

The .progress-bar-animated class can be used to give animation to the progress bar.

The code below explains the usage for this class:

Bootstrap Multiple Progress Bars

Multiple progress bars can be stacked to show progress about different phases of the processes.

See the code below for the illustration

 

  

    Free Space
  

  

    Warning
  

  

    Danger