Progress steps

Added in 1.5.0

Progress steps show where the user is in a short flow such as setup or onboarding, with done, active and upcoming steps.

Default markup

Use .progress-steps as the container and .progress-steps-item for each segment.

<ol class="progress-steps" aria-label="Onboarding progress">
  <li class="progress-steps-item"></li>
  <li class="progress-steps-item"></li>
  <li class="progress-steps-item"></li>
</ol>

The default structure:

<ol class="progress-steps" aria-label="Onboarding progress">
  <li class="progress-steps-item"></li>
  <li class="progress-steps-item"></li>
  <li class="progress-steps-item"></li>
  <li class="progress-steps-item"></li>
</ol>

Variants

Current and completed step

Use color classes to mark completed steps. Set aria-current="step" on the current item.

<ol class="progress-steps" aria-label="Setup progress">
  <li class="progress-steps-item bg-primary">
    <span class="visually-hidden">Step 1</span>
  </li>
  <li class="progress-steps-item bg-primary" aria-current="step">
    <span class="visually-hidden">Step 2</span>
  </li>
  <li class="progress-steps-item">
    <span class="visually-hidden">Step 3</span>
  </li>
  <li class="progress-steps-item">
    <span class="visually-hidden">Step 4</span>
  </li>
</ol>

Custom labels

Use hidden labels so assistive technologies can announce meaningful step names.

<ol class="progress-steps" aria-label="Checkout progress">
  <li class="progress-steps-item bg-primary">
    <span class="visually-hidden">Account</span>
  </li>
  <li class="progress-steps-item bg-primary">
    <span class="visually-hidden">Profile</span>
  </li>
  <li class="progress-steps-item bg-primary" aria-current="step">
    <span class="visually-hidden">Billing</span>
  </li>
  <li class="progress-steps-item">
    <span class="visually-hidden">Review</span>
  </li>
</ol>

Color state

Use contextual background classes on completed and current items to match the state colors of your flow.

<div class="mb-2">
  <ol class="progress-steps" aria-label="Green progress">
    <li class="progress-steps-item bg-green" aria-current="step">
      <span class="visually-hidden">Step 1</span>
    </li>
    <li class="progress-steps-item">
      <span class="visually-hidden">Step 2</span>
    </li>
  </ol>
</div>
<div class="mb-2">
  <ol class="progress-steps" aria-label="Orange progress">
    <li class="progress-steps-item bg-orange" aria-current="step">
      <span class="visually-hidden">Step 1</span>
    </li>
    <li class="progress-steps-item">
      <span class="visually-hidden">Step 2</span>
    </li>
  </ol>
</div>
<div>
  <ol class="progress-steps" aria-label="Red progress">
    <li class="progress-steps-item bg-red" aria-current="step">
      <span class="visually-hidden">Step 1</span>
    </li>
    <li class="progress-steps-item">
      <span class="visually-hidden">Step 2</span>
    </li>
  </ol>
</div>

Width and layout utilities

Use utility classes on .progress-steps to control width and placement in layouts.

<ol class="progress-steps w-50" id="profile-progress" aria-label="Profile completion">
  <li class="progress-steps-item bg-primary" aria-current="step">
    <span class="visually-hidden">Step 1</span>
  </li>
  <li class="progress-steps-item">
    <span class="visually-hidden">Step 2</span>
  </li>
  <li class="progress-steps-item">
    <span class="visually-hidden">Step 3</span>
  </li>
  <li class="progress-steps-item">
    <span class="visually-hidden">Step 4</span>
  </li>
  <li class="progress-steps-item">
    <span class="visually-hidden">Step 5</span>
  </li>
</ol>

Accessibility

  • Say where the user is in text as well - "Step 2 of 4" next to the bar, or in a visually-hidden span. The filled shape alone does not carry it.
  • Mark the current step with aria-current="step".
  • If you use the underlying progress bar to draw the line, give it role="progressbar" with the step number as aria-valuenow and the total as aria-valuemax.
  • Do not rely on the color of a circle to say "done". Add an icon or a word.

Class reference

Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.

progress-steps componentContainer element
progress-steps-item partOne step; mark the reached ones as active
Progress bar

Show task progress with progress bars. Set the value, color, and size, or use indeterminate bars for unknown durations.

Step

Guide users through multi-step processes with a steps indicator. Show completed, active, and upcoming steps in a clear layout.

On this page

130 sleek illustrations for your startup's visual identity.