Progress


displayunchanged positionunchanged z-indexunchanged font-size scalingyes breakpointsno

Class list

  • .progress
  • .progress-bar

Description

Use a .progress to visually indicate how much progress has been made.

Structure

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

Multiple

Any number of .progress-bar elements can be put inside of a .progress.

<div class="progress">
    <div class="progress-bar" style="width: 20%;"></div>
    <div class="progress-bar primary" style="width: 30%;"></div>
    <div class="progress-bar info" style="width: 40%;"></div>
</div>

Font size scaling

Use the font size utility classes on a .progress to change its size.

<div class="progress h6 mb-half">
    <div class="progress-bar" style="width: 20%;"></div>
</div>
<div class="progress mb-half">
    <div class="progress-bar" style="width: 20%;"></div>
</div>
<div class="progress h2">
    <div class="progress-bar" style="width: 20%;"></div>
</div>

Themes

Use any of the provided theme classes on a .progress-bar to have that themes styles applied.

<div class="progress">
    <div class="progress-bar primary" style="width: 15%"></div>
    <div class="progress-bar info" style="width: 15%"></div>
    <div class="progress-bar caution" style="width: 15%"></div>
    <div class="progress-bar danger" style="width: 15%"></div>
    <div class="progress-bar light" style="width: 15%"></div>
    <div class="progress-bar dark" style="width: 15%"></div>
</div>