Progress Steps

A progress step helps users track their place in a short process by breaking it into clear, simple steps. This makes flows like setup or onboarding easier to follow and finish.

Default markup

Use .progress-steps as the container and .progress-steps-item for each segment. These two classes are enough to create the base component 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>
</ol>

The example below shows the default progress step 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.

Step 1
Step 2
Step 3
Step 4

<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.

Account
Profile
Billing
Review

<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. This helps match state color to your flow semantics.

Step 1
Step 2

Step 1
Step 2

Step 1
Step 2

<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.

Step 1
Step 2
Step 3
Step 4
Step 5

<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>

Edit this page on GitHub