Steps

Steps are used to guide users through complex processes, making them easier and more intuitive. Breaking a multi-step process into smaller parts and tracking progress along the way helps users complete it successfully.

Default markup

Steps provide a clear visual representation of a user’s progress through a multi-step process. By showing what has been completed and what remains, steps enhance usability and encourage task completion.

To create a default progress tracker, use the .steps class and define each step as a .step-item. The active step clearly indicates the current position in the process.

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

The example below demonstrates a simple progress tracker with four steps, where the third step is active.

Tooltips

Add tooltips, if you want to provide users with additional information about the steps they are expected to complete. Tooltips are displayed when a user hovers over a given step and help clarify what might not be clear from the interface.

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>

The example below demonstrates a progress tracker with tooltips for each step.

Color

You can customize the default progress indicator by changing the color to one that better suits your design. Click here to see the range of available colors.

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

The example below demonstrates a progress tracker with two different color schemes.

Steps without title

For designs with limited space, use progress indicators without titles and add tooltips to provide the necessary details.

Steps with numbers

Use the steps-counter class to create a progress tracker with numbers instead of titles and change the color to customize it.

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

The example below demonstrates a progress tracker with numbers and a different color scheme.