BS4 Progress Bars
Basic Progress Bar
A user can see how far along they are in a process by using a progress bar.
To build a default progress bar, add a .progress class to a container element and add the .progress-bar class to its child element. To adjust the progress bar’s width, use the CSS width property:
Example
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
Progress Bar Height
By default, the progress bar’s height is 16 pixels. To adjust it, use the CSS height attribute. Keep in mind that the progress container and the progress bar must have the same height:
Example
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:40%;height:20px"></div>
</div>
Progress Bar Labels
To display the visible percentage, add text inside the progress bar as follows:
Example
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
Colored Progress Bars
The progress bar is blue (primary) by default. To alter its color, apply any of the Bootstrap 4 contextual background classes:
Example
<!-- Blue -->
<div class="progress">
<div class="progress-bar" style="width:10%"></div>
</div>
<!-- Green -->
<div class="progress">
<div class="progress-bar bg-success" style="width:20%"></div>
</div>
<!-- Turquoise -->
<div class="progress">
<div class="progress-bar bg-info" style="width:30%"></div>
</div>
<!-- Orange -->
<div class="progress">
<div class="progress-bar bg-warning" style="width:40%"></div>
</div>
<!-- Red -->
<div class="progress">
<div class="progress-bar bg-danger" style="width:50%"></div>
</div>
<!-- White -->
<div class="progress border">
<div class="progress-bar bg-white" style="width:60%"></div>
</div>
<!-- Grey -->
<div class="progress">
<div class="progress-bar bg-secondary" style="width:70%"></div>
</div>
<!-- Light Grey -->
<div class="progress border">
<div class="progress-bar bg-light" style="width:80%"></div>
</div>
<!-- Dark Grey -->
<div class="progress">
<div class="progress-bar bg-dark" style="width:90%"></div>
</div>
Striped Progress Bars
To give the progress bars stripes, use the .progress-bar-striped class:
Example
<div class="progress">
<div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>
Animated Progress Bar
==== Animated Progress Bar ====
To make the progress bar animate, add the .progress-bar-animated class:
Example
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
Multiple Progress Bars
Another way to stack progress bars is to:
Example
<div class="progress">
<div class="progress-bar bg-success" style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger" style="width:20%">
Danger
</div>
</div>
