Bootstrap 5Navigation

Bootstrap 5 Step Indicator

A Step Indicator is a horizontal or vertical progress navigation component that shows users where they are in a multi-step process, how many steps remain, and which steps are complete. It is built in Bootstrap 5 using a combination of flex utilities, badges, borders, and custom CSS since Bootstrap does not ship a native step indicator. Use it any time a task requires more than two sequential actions, such as checkout flows, onboarding wizards, or multi-page forms.

Primary Class

.step-indicator

Common Use Cases

→E-commerce checkout flow broken into Cart, Shipping, Payment, and Confirmation steps so shoppers always know how close they are to completing a purchase
→SaaS onboarding wizard that walks new users through connecting an integration, inviting teammates, and configuring notifications before their first dashboard view
→Insurance quote form split into Personal Details, Coverage Options, Review, and Quote steps to reduce abandonment by making a long form feel manageable
→Job application portal that separates Profile, Work History, Documents Upload, and Submit Review into discrete tracked stages

Variants & Classes

Variant	Description	Classes
Step Indicator Default	Standard step indicator with Bootstrap's default styling.	`step-indicator`
Step Indicator Responsive	Responsive variant that adapts to different screen sizes.	`step-indicator step-indicator-responsive`

Code Example

<div class="d-flex align-items-start justify-content-between position-relative mb-5" id="stepIndicator">
  <!-- Connector line -->
  <div class="position-absolute top-0 start-0 w-100" style="height: 2px; background: #dee2e6; top: 20px; z-index: 0;"></div>

  <!-- Step 1: Complete -->
  <div class="d-flex flex-column align-items-center position-relative" style="z-index: 1; width: 25%;">
    <div class="rounded-circle d-flex align-items-center justify-content-center bg-primary text-white fw-bold" style="width: 40px; height: 40px;">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" class="bi bi-check-lg" viewBox="0 0 16 16"><path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z"/></svg>
    </div>
    <span class="mt-2 small fw-semibold text-primary">Your Cart</span>
  </div>

  <!-- Step 2: Active -->
  <div class="d-flex flex-column align-items-center position-relative" style="z-index: 1; width: 25%;">
    <div class="rounded-circle d-flex align-items-center justify-content-center bg-primary text-white fw-bold border border-3 border-primary" style="width: 40px; height: 40px;">2</div>
    <span class="mt-2 small fw-semibold text-primary">Shipping</span>
  </div>

  <!-- Step 3: Upcoming -->
  <div class="d-flex flex-column align-items-center position-relative" style="z-index: 1; width: 25%;">
    <div class="rounded-circle d-flex align-items-center justify-content-center bg-white text-muted fw-bold border border-2" style="width: 40px; height: 40px;">3</div>
    <span class="mt-2 small text-muted">Payment</span>
  </div>

  <!-- Step 4: Upcoming -->
  <div class="d-flex flex-column align-items-center position-relative" style="z-index: 1; width: 25%;">
    <div class="rounded-circle d-flex align-items-center justify-content-center bg-white text-muted fw-bold border border-2" style="width: 40px; height: 40px;">4</div>
    <span class="mt-2 small text-muted">Confirmation</span>
  </div>
</div>

Live Examples

Basic Step Indicator

Example 1

Canvas Framework Variants

The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:

✓Canvas Builder generated step indicator with custom colours
✓Step Indicator with interactive states
✓Responsive step indicator for all screen sizes

Best Practices

Replace step numbers with check icons on completion

Swap the number inside the circle for a Bootstrap Icons checkmark SVG or the Unicode character ✓ when a step is marked complete. This gives users immediate visual confirmation without relying solely on colour.

Use aria-current and aria-label for screen readers

Add aria-current="step" to the active step element and aria-label="Step 2 of 4: Shipping" to each circle so assistive technologies can announce progress accurately instead of just reading a number.

Keep the connector line behind the circles using z-index

Set the horizontal connector line to position: absolute with z-index: 0, and each step circle wrapper to z-index: 1. This prevents the line from visually overlapping the circle borders, which breaks the indicator's clarity on smaller screens.

Collapse labels on mobile to avoid overflow

Use Bootstrap's d-none d-sm-block utility on the step label text so that only the circles render on extra-small screens. This keeps the component from wrapping or truncating label text on viewports under 576px.

FAQ

Does Bootstrap 5 include a built-in step indicator component?

No, Bootstrap 5 does not ship a native step indicator or wizard progress component. You build it by combining Bootstrap's flex utilities (d-flex, justify-content-between), spacing helpers, border utilities (rounded-circle, border, border-primary), and background colour classes (bg-primary, bg-white). The connector line between steps is typically a thin absolutely-positioned div. Because all the building blocks exist in Bootstrap's utility layer, you can create a fully functional step indicator without writing custom CSS beyond a few inline styles for fixed dimensions on the circles.

How do I customise the active and completed step colours to match my brand?

The fastest approach in Bootstrap 5 is to override CSS variables in your stylesheet: set --bs-primary to your brand hex value and the bg-primary, text-primary, and border-primary classes update everywhere automatically. For more granular control, add a custom class such as .step-complete and .step-active alongside Bootstrap classes, then define background-color, border-color, and color rules for each state. If you are using Sass, override $primary in your variables file before importing Bootstrap so the entire compiled output reflects your brand colour.

How does Canvas Builder generate a Step Indicator component?

Canvas Builder reads your prompt describing the number of steps and their labels, then outputs a fully marked-up step indicator using Bootstrap 5 utility classes. It applies your brand primary colour to completed and active states, uses your configured border-radius scale for the circles, and wraps the component in a responsive container that collapses labels on mobile using Bootstrap breakpoint utilities. The generated code is production-ready HTML you can drop directly into your Canvas template without any additional dependencies.