Bootstrap 5Feedback

Bootstrap 5 Progress Steps

Progress Steps (also called a step indicator or wizard progress bar) is a multi-stage navigation component that shows users exactly where they are in a sequential process, how many steps remain, and which steps are already complete. Bootstrap 5 does not ship a dedicated progress steps component out of the box, so it is typically built using a combination of flexbox utilities, the .nav or .list-group classes, custom CSS for connectors, and badge or icon elements for step markers. Use it whenever a task spans multiple distinct phases and abandonment risk increases without clear orientation cues.

Primary Class

.progress-steps

Common Use Cases

→E-commerce checkout flows showing Cart, Shipping, Payment, and Confirmation stages so customers know exactly how many screens remain before their order is placed
→SaaS onboarding wizards guiding new users through Account Setup, Team Invite, Integration, and Go Live steps to reduce drop-off during first-run experiences
→Multi-page insurance or loan application forms where applicants must complete Personal Details, Financial Info, Document Upload, and Review sections in a fixed order
→Software installation wizards on documentation or download pages that walk users through License Agreement, Choose Directory, Install Options, and Finish stages

Variants & Classes

Variant	Description	Classes
Progress Steps Default	Standard progress steps with Bootstrap's default styling.	`progress-steps`
Progress Steps Responsive	Responsive variant that adapts to different screen sizes.	`progress-steps progress-steps-responsive`

Code Example

<div class="d-flex align-items-center justify-content-between mb-4" aria-label="Checkout progress">

  <!-- Step 1: Complete -->
  <div class="d-flex flex-column align-items-center">
    <div class="rounded-circle bg-success text-white d-flex align-items-center justify-content-center mb-1" style="width:40px;height:40px;">
      <i class="bi bi-check-lg"></i>
    </div>
    <small class="text-success fw-semibold">Cart</small>
  </div>

  <!-- Connector -->
  <div class="flex-grow-1 border-top border-success mx-2" style="height:2px;"></div>

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

  <!-- Connector -->
  <div class="flex-grow-1 border-top border-secondary mx-2" style="height:2px;"></div>

  <!-- Step 3: Upcoming -->
  <div class="d-flex flex-column align-items-center">
    <div class="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center mb-1" style="width:40px;height:40px;">
      <span class="fw-bold">3</span>
    </div>
    <small class="text-secondary">Payment</small>
  </div>

  <!-- Connector -->
  <div class="flex-grow-1 border-top border-secondary mx-2" style="height:2px;"></div>

  <!-- Step 4: Upcoming -->
  <div class="d-flex flex-column align-items-center">
    <div class="rounded-circle bg-secondary text-white d-flex align-items-center justify-content-center mb-1" style="width:40px;height:40px;">
      <span class="fw-bold">4</span>
    </div>
    <small class="text-secondary">Confirm</small>
  </div>

</div>

Live Examples

Basic Progress Steps

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 progress steps with custom colours
✓Progress Steps with interactive states
✓Responsive progress steps for all screen sizes

Best Practices

Use aria-current for accessibility

Add aria-current="step" to the active step's wrapper element so screen readers can announce the current position in the sequence. Pair it with aria-label on the outer container naming the process (for example, 'Checkout progress') to give assistive technology full context.

Collapse labels on small screens

Use Bootstrap's responsive display utilities such as d-none d-sm-block on the step label text so the indicator stays usable on narrow mobile viewports without labels overflowing. Keeping the numbered circles always visible is enough orientation on small screens.

Distinguish complete, active, and upcoming states visually

Apply bg-success with a checkmark icon for completed steps, bg-primary for the current step, and bg-secondary or border-only circles for upcoming steps. This three-state visual vocabulary prevents users from confusing where they are with where they have already been.

Make connectors scale with step count

Use flex-grow-1 on connector divs rather than fixed widths so the spacing between circles automatically redistributes when you add or remove steps. Hard-coded pixel widths break layouts as soon as the step count changes.

FAQ

Can users click on completed steps to go back, and how should that be marked up?

Yes, completed steps should generally be clickable so users can review or edit earlier input without losing downstream data. Wrap completed step markers in an anchor tag with a valid href or use a button element, and add the text-decoration-none class to keep the visual style clean. Upcoming steps that have not yet been reached should use a span or a disabled button with aria-disabled='true' to prevent skipping ahead when the process requires sequential validation.

How do I customise the step indicator colours to match my brand in Bootstrap 5?

The cleanest approach is to override Bootstrap's CSS custom properties in your own stylesheet. Set --bs-primary, --bs-success, and --bs-secondary to your brand hex values inside a :root block and all bg-primary, bg-success, text-primary, and border-primary utilities will update automatically. If you only want to change the step circles without touching global utilities, add a scoped class such as .step-indicator to the outer wrapper and target .step-indicator .rounded-circle with specific background-color and color values.

How does Canvas Builder generate a Progress Steps component?

When you describe a multi-step flow in Canvas Builder, the AI reads your brand colour settings and maps them to Bootstrap utility classes automatically. Completed steps receive bg-success or your brand's success colour override, the active step uses your primary brand colour, and upcoming steps render in a muted secondary tone. The output is production-ready HTML with flexbox connectors, responsive label visibility, and aria attributes included, so no manual adjustments are needed before deploying.