In this tutorial you will learn how to create progress bars using Bootstrap.

Creating Progress Bar with Bootstrap

Progress bars can be used for showing the progress of a task or action to the users.

The following example will show you how to create a simple progress bar with vertical gradient.

Example

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

— The output of the above example will look something like this:

Note: The wrapper, i.e. the .progress element indicates the max value of the progress bar, whereas the inner .progress-bar element indicates the progress so far. Also, the .progress-bar requires an inline style, or custom CSS to set their width.

Creating Progress Bar with Label

You can also display the progress status as a percentage label just by placing the text within the .progress-bar element, as shown in the following example:

Example

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

— The output of the above example will look something like this:

If you are showing percentage label you should also apply a min-width to the progress bar to ensure that the label text remains readable even for low percentage, as shown here:

Example

<div class="progress">
    <div class="progress-bar" style="min-width: 20px;">
        0%
    </div>
</div>
<div class="progress">
    <div class="progress-bar" style="min-width: 20px; width: 2%;">
        2%
    </div>
</div>