In bootstrap, the progress bars are useful to show the progress of the job or task that is pending to complete.
To create progress bars, it is required to use .progress
and .progress-bar
classes and an inline style to modify the width of the progress bar as shown below.
Live Preview <div class="progress">
<div class="progress-bar"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 50%"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 75%"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 100%"></div>
</div>
If you observe the above code, we created a wrapper (<div>
) element with .progress
class, and it is useful to indicate the max value of the progress bar. Inside of wrapper element, we added another child <div>
element with .progress-bar
class to indicate the progress so far and added inline styles to set the width of a progress bar.
The above example will return the result as shown below.

If you observe the above code, we used an inline style element (style="width: 50%"
) to set the width of a progress bar. Instead, we can also use bootstrap utility classes such as .w-25
, .w-50
, .w-75
, .w-100
Etc. to set the width of the progress bar as shown below.
<div class="progress">
<div class="progress-bar w-25"></div>
</div>
<div class="progress">
<div class="progress-bar w-50"></div>
</div>
Bootstrap Progress Bar with Label
You can add a label inside of the progress bar to show the progress status for that, add a text inside of the .progress-bar
class <div>
like as shown below.
Live Preview <div class="progress">
<div class="progress-bar" style="width: 25%">25%</div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 50%">50%</div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 75%">75%</div>
</div>
The above example will return the result as shown below.

Bootstrap Progress Bar Height
In bootstrap, by default, the progress bar height will be 16px
. In case if you want to change the height of the progress bar, set the height
property on .progress
class <div>
element.
Live Preview <div class="progress" style="height:10px">
<div class="progress-bar" style="width: 25%"></div>
</div>
<div class="progress">
<div class="progress-bar" style="width: 75%"></div>
</div>
<div class="progress" style="height:30px">
<div class="progress-bar" style="width: 50%"></div>
</div>
The above example will return the result as shown below.

Bootstrap Colored Progress Bars
To change the appearance of the progress bar, use bootstrap background utility classes such as .bg-success
, .bg-warning
, .bg-info
, .bg-danger
Etc. along with .progress-bar
class.
Live Preview <div class="progress">
<div class="progress-bar" style="width: 40%">40%</div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" style="width: 50%">50%</div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" style="width: 60%">60%</div>
</div>
<div class="progress">
<div class="progress-bar bg-info" style="width: 70%">70%</div>
</div>
<div class="progress">
<div class="progress-bar bg-success" style="width: 80%">80%</div>
</div>
<div class="progress">
<div class="progress-bar bg-secondary" style="width: 90%">90%</div>
</div>
<div class="progress">
<div class="progress-bar bg-dark" style="width: 100%">100%</div>
</div>
The above example will return the result as shown below.

Bootstrap Striped Progress Bars
In bootstrap, you can apply the striped effect to your progress bars by adding .progress-bar-striped
class to any .progress-bar
. The .progress-bar-striped
class will apply stripe via CSS gradient over the progress bar’s background color.
Live Preview <div class="progress">
<div class="progress-bar progress-bar-striped" style="width: 50%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-danger" style="width: 60%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-warning" style="width: 70%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-info" style="width: 80%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success" style="width: 90%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-dark" style="width: 100%"></div>
</div>
The above example will return the result as shown below.

Bootstrap Animated Progress Bars
In bootstrap, we can apply the animation effect to the striped progress bars. To animate the striped progress bar, you need to add .progress-bar-animated
class along with .progress-bar
class.
The .progress-bar-animated
class will animate the striped progress bar from right to left via CSS animations.
Live Preview <div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 50%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-danger progress-bar-animated" style="width: 60%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-warning progress-bar-animated" style="width: 70%"></div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-striped bg-success progress-bar-animated" style="width: 90%"></div>
</div>
The above example will return the result as shown below.

Bootstrap Multiple Progress Bars
In bootstrap, you can merge multiple progress bars in one progress bar by adding multiple .progress-bar
div’s inside of .progress
class <div>
element.
Live Preview <div class="progress">
<div class="progress-bar bg-danger" style="width: 20%"></div>
<div class="progress-bar bg-warning" style="width: 20%"></div>
<div class="progress-bar" style="width: 20%"></div>
<div class="progress-bar bg-success" style="width: 40%"></div>
</div>
The above example will return the result as shown below.

This is how we can use the progress bars in our applications to show the progress of tasks based on our requirements.