Bootstrap 4 - Progress Bars

Bootstrap comes with responsive features and some UI benefits and brings some meaningful graphical representations of showing things beautifully. One of them is the progress bars. In this chapter, you will learn about how to implement different types of progress bars on your web page.

What Is Progress Bars in Bootstrap 4?

A bootstrap progress bar is a graphical bar that shows the progress of any process or development within an application. In other words, a progress bar shows users how far the user has reached in completing any process.

Basic Progress Bar Implementation

To apply the default progress bar, you must use the .progress class to the container element. Also, you must add the class .progress-bar to your child element. You can also use the CSS property "width" to set the width of your progress bar. It looks like this:

Here is a sample example that shows the use of a basic progress bar.

Code Snippet:
<div class="progress">
<div class = "progress-bar" style = "width:60%"></div>
</div>
Output:

Customizing the Height of the Progress Bar

Developers can also change the height of the progress bar as per their requirements. For this, you have to make use of "style = height:px" in the container element. Here is a sample code of how to customize your progress bar's height.

Code Snippet:
<div class="progress" style = "height:30px">
<div class = "progress-bar" style = "width:60%"></div>
</div>
Output:

Progress Bar Labeling

You might have seen a text showing the percentage of progress done in the progress bar. This is what the label is all about within a progress bar. To add a label within your progress bar, you have to put the text within the <div> and </div>. This will look something like this:

Example:
60%
Code Snippet:
<div class="progress">
<div class="progress-bar" style="width: 60%;">60%</div>
</div>

Progress Bar Coloring

You can use context classes in <div> to add a background color to your progress bar. By default, this is the bg-primary you saw in the initial example.

Example:
Blue

 

Light Grey

 

Dark Grey

 

Turquoise

 

Green

 

Orange

 

Red

 

Grey

 

White

Here is a sample code snippet showing the colored progress bar:

Code Snippet:
<div class="progress">
    <div class="progress-bar" style="width:10%"> Blue </div>
</div>
<br>
<div class="progress border">
    <div class="progress-bar bg-light text-dark" style="width:80%"> Light Grey </div>
</div>
<br>
<div class="progress">
    <div class="progress-bar bg-dark" style="width:90%"> Dark Grey </div>
</div>
<br>
<div class="progress">
    <div class="progress-bar bg-info" style="width:30%"> Turquoise </div>
</div>
<br>
<div class="progress">
    <div class="progress-bar bg-success" style="width:20%"> Green </div>
</div>
<br>
<div class="progress">
    <div class="progress-bar bg-warning" style="width:40%"> Orange </div>
</div>
<br>
<div class="progress">
    <div class="progress-bar bg-danger" style="width:50%"> Red </div>
</div>
<br>
<div class="progress">
    <div class="progress-bar bg-secondary" style="width:70%"> Grey </div>
</div>
<br>
<div class="progress border">
    <div class="progress-bar bg-white text-dark" style="width:60%"> White </div>
</div>

Striped Progress Bar

It is another type of progress bar with stripes on its body. To use this, you have to make use of a .progress-bar-striped class. This is how it looks like:

Example:
Code Snippet:
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width:50%"> </div>
</div>

Animated Progress Bar

To create an animated progress bar, you have to make use of the .progress-bar-animated class. Here is a sample code snippet of its use:

Code Snippet:
<div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:80%"> </div>
</div>

Scroll Back to Top