Step

Steps show where the user is in a multi-step process: which steps are done, which one is active and which are left.

Default markup

Use the .steps class for the list and .step-item for each step. The active class marks the current step.

<div class="steps">
  <a href="#" class="step-item"> Step 1 </a>
  <a href="#" class="step-item"> Step 2 </a>
  <a href="#" class="step-item active"> Step 3 </a>
</div>

Four steps, with the third one active:

<div class="steps">
  <a href="#" class="step-item">Step 1</a>
  <a href="#" class="step-item">Step 2</a>
  <a href="#" class="step-item active">Step 3</a>
  <span href="#" class="step-item">Step 4</span>
</div>

Tooltips

Add a tooltip to a step to explain it on hover, for example when the step titles are short.

To add a tooltip, use the data-bs-toggle="tooltip" attribute and specify the tooltip content with the title attribute.

<a
  href="#"
  class="step-item"
  data-bs-toggle="tooltip"
  data-bs-placement="top"
  title="Step 1 description"
>
  Step 1
</a>

A tracker with a tooltip on each step:

<div class="steps">
  <a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 1 description"> Step 1 </a>
  <a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 2 description"> Step 2 </a>
  <a href="#" class="step-item active" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 3 description"> Step 3 </a>
  <span href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 4 description"> Step 4 </span>
</div>

Color

Change the color with a steps-* class, using any name from the color palette.

<div class="steps steps-green">...</div>

Two color schemes:

<div class="steps steps-green">
  <a href="#" class="step-item">Step 1</a>
  <a href="#" class="step-item">Step 2</a>
  <a href="#" class="step-item active">Step 3</a>
  <span href="#" class="step-item">Step 4</span>
</div>
<div class="steps steps-red">
  <a href="#" class="step-item">Step 1</a>
  <a href="#" class="step-item">Step 2</a>
  <a href="#" class="step-item active">Step 3</a>
  <span href="#" class="step-item">Step 4</span>
</div>

Steps without title

When there's no room for titles, use steps without them and put the details in tooltips.

<div class="steps">
  <a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 1 description"></a>
  <a href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 2 description"></a>
  <a href="#" class="step-item active" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 3 description"></a>
  <span href="#" class="step-item" data-bs-toggle="tooltip" data-bs-placement="top" title="Step 4 description"></span>
</div>

Steps with numbers

The steps-counter class shows a number in each step instead of a title.

<div class="steps steps-counter">...</div>

Numbered steps in another color:

<div class="steps steps-counter">
  <a href="#" class="step-item"></a>
  <a href="#" class="step-item active"></a>
  <span href="#" class="step-item"></span>
  <span href="#" class="step-item"></span>
  <span href="#" class="step-item"></span>
</div>

Accessibility

• Use an ordered list for the steps. The numbering is meaning, not decoration, so let the markup carry it.
• Mark the current step with aria-current="step". The active class only changes the colors.
• A completed step and a pending one must differ in more than color - a checkmark, a label, or the word "done".
• If a step is a link, keep it a real link; if it cannot be reached yet, use aria-disabled="true" and take it out of the tab order.

SCSS variables

Use these SCSS variables to customize steps. The default values are:

$steps-border-width: 2px;
$steps-color: var(--primary);
$steps-inactive-color: var(--border-color);
$steps-dot-size: 0.5rem;
$step-item-min-height: 1rem;
$steps-counter-dot-size: 1.5rem;
$steps-vertical-padding-start: 1rem;
$steps-vertical-item-gap: 1rem;
$steps-vertical-connector-gap: 1rem;
$steps-dot-offset: 6px;
$steps-dot-offset-counter: -2px;

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.

Related