Bootstrap 4 - Progress Bar Component

Bootstrap 4 comes with responsive features and some UI benefits and brings some meaningful graphical representation of showing things beautifully. One of them is progress bars. This tutorial will teach you how to implement different types of progress bars on a web page.

Table of Contents

What Is Progress Bar Component in Bootstrap 4?

A Bootstrap 4 progress bar is a graphical bar that shows the progress of completion of any process or development within an application. In other words, a progress bar shows users how far they have reached in completing any process.

Basic Progress Bar Implementation

You must use the .progress class for the container element to apply the default progress bar. Also, you need to add a .progress-bar class to the child element. You can also use the CSS property width to determine the width of your progress bar. 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 the design requirements. For this, inline styling is used 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 may have seen text showing some percentage of progress made in the progress bar. It is a label. To add a label within your progress bar, you need to place the text in the div of the .progress-bar class. It will look something like this:

Code Snippet:

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

Output:

60%

Progress Bar Coloring

You can use Bootstrap 4 context classes in the <div> tag 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>

<div class="progress border">
    <div class="progress-bar bg-light text-dark" style="width:80%">Light Grey</div>
</div>

<div class="progress">
    <div class="progress-bar bg-dark" style="width:90%">Dark Grey</div>
</div>

<div class="progress">
    <div class="progress-bar bg-info" style="width:30%">Turquoise</div>
</div>

<div class="progress">
    <div class="progress-bar bg-success" style="width:20%">Green</div>
</div>

<div class="progress">
    <div class="progress-bar bg-warning" style="width:40%">Orange</div>
</div>

<div class="progress">
    <div class="progress-bar bg-danger" style="width:50%">Red</div>
</div>

<div class="progress">
    <div class="progress-bar bg-secondary" style="width:70%">Grey</div>
</div>

<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. It looks like this:

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 must use the .progress-bar-animated class. Here is a sample code snippet of its use:

Example:

Code Snippet:

<div class="progress">
    <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:80%"></div>
</div>
Found This Page Useful? Share It!
Get the Latest Tutorials and Updates
Join us on Telegram