Bootstrap 4 Progress Bars Tutorial

Progress bars are used for showcasing skills, percentage of  projects completion and for similar purposes. Bootstrap 4 has different styles of progress bars similar to Bootstrap 3 progress bars. In this tutorial let us explore more on each type of progress bars offered in Bootstrap 4.

Bootstrap 4 Progress Bars Tutorial

  1. HTML5 progress bars
  2. Bootstrap 4 progress bars CSS classes
  3. Creating default progress bars
  4. Progress bars with different background colors
  5. Adding labels in progress bars
  6. Multiple progress bars
  7. Striped style
  8. Animated striped style
  9. Adjusting height

Let us discuss each topic in detail.

1. HTML5 Progress Bars

Remember HTML5 has a default <progress> tag to create horizontal progress bars which is sufficient in most cases. Below is the code block of HTML5 progress bars.

<progress value="50" max="100">50 %</progress><br />
<progress value="60" max="100">60 %</progress><br />
<progress value="70" max="100">70 %</progress><br />
<progress value="80" max="100">80 %</progress><br />

It will look like below on the browser:

50 %

60 %

70 %

80 %

Bootstrap does not use HTML5 progress bar and has it’s own style for progress bar component.

Offer: Get 92% discount of Mobirise Bootstrap site builder.

2. CSS Classes Used in Bootstrap 4 Progress Bars

Bootstrap 4 uses the following CSS classes to create progress bars:

  • “.progress” class is used for outer wrapper for the progress bar. It is used to contain multiple progress bars within the wrapper.
  • “.progress-bar” class is used to create actual progress bar to show the percentage of progress.
  • Width of the each progress bar should be explicitly defined with additional CSS classes.
  • Additionally you can add “role” and “aria” attributes to the progress bar for readability purpose.
  • “aria-valuenow” is used to indicate the current progress value, “aria-valuemin” is the minimum value which is 0 and “aria-valuemax” is the maximum value which is 100.

Let us create some examples using these classes.

3. Default Progress Bars

The default progress bar uses the primary color for showing the progress and lightgray for the background. Below is the code for creating five progress bars with 0, 25, 50, 75 and 100% progress.

<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

It will look like below on the browser:

Default Progress Bars

As mentioned above, each progress bar should have a width explicitly defined to show the completion. You can either use inline style or utility classes for this purpose. We have used the utility sizing classes for 25%, 50% and 75% with w-25, w-50 and w-75 respectively. For 100% width, we have used inline style with “width:100%”.

Also remember to add manual line break between progress bars to avoid all bars are showing on the same line.

4. Progress Bars with Backgrounds

Similar to many other components, you can just use the background utility classes to change the background to success, warning, info, danger, dark or secondary colors.

<div class="progress">
<div class="progress-bar w-25 bg-danger" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar w-50 bg-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar w-75 bg-info" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="80"></div>
</div>
<div class="progress">
<div class="progress-bar bg-dark" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="90"></div>
</div>
<div class="progress">
<div class="progress-bar bg-secondary" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="60"></div>
</div>

The progress bars will look like below:

Progress Bars with Background Colors

Note the primary color is the default value so you don’t need to mention if you want the progress to be in primary color. Also you can’t use light background color as the background of the progress bar is also in light color.

You can use background utility classes on the outer progress wrapper to change the background of the progress bar. For example, below code will produce the progress bar with red (danger) color background instead of lightgray.

<div class="progress bg-danger">
<div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

The result will look like below on the browser:

Progress Bar with Different Background Color

Offer: Get 92% discount of Mobirise Bootstrap site builder.

5. Progress Bars with Labels

If you want to add the labels to the progress bar, just add the text before the closing </div> tag of each progress bar. Below is an example to show 75% completion:

<div class="progress">
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75% Completed</div>
</div>

The label will be shown on top of the bar with center alignment like below:

Progress Bar with Label

6. Multiple Progress Bars

Adding multiple progress bars within a single outer wrapper will create all bars in a single line.

<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div>
  <div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div>
  <div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30%</div>
</div>

The multiple progress bars will look like below:

Multiple Progress Bars

7. Striped Progress Bars

The “.progress-bar-striped” class is used to create striped progress bars (background utility class is used to show different colors).

<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
</div>

Striped progress bars should look like below:

Striped Progress Bars

8. Animated Striped Progress Bars

The last option is to animate the stripe using “.progress-bar-animated” class.

<div class="progress">
<div class="progress-bar bg-success progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">50%</div>
</div>

This will create a animated progress bar with green stripes. Remember you can only animate the striped bars and not the default ones.

9. Changing Height or Thickness of Progress Bars

By default the progress bars will have 1rem height. You can change the height using inline style within “.progress-bar” class and the outer wrapper will automatically aligned accordingly. Let us create two bars with 0.rem and 30px in height:

<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" style="width: 50%; height: 0.5rem;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div><br>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" style="width: 75%; height: 30px;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

The result should be like below on the browser:

Changing Progress Bar Height

The problem in changing the height is the labels when used will not align properly. Again you should use additional styles manually to align the labels in vertical center.

Editorial Staff at WebNots are team members who love to build websites and share the learning with webmasters community. Follow us on Facebook and Twitter.

Leave a Comment