Bootstrap 5 Step Wizard
A Step Wizard is a multi-step form interface that breaks a long or complex process into sequential, numbered stages — each stage revealed only after the previous one is completed. Use it when collecting structured information across distinct phases, such as checkout flows, onboarding sequences, or multi-stage registrations, where showing everything at once would overwhelm the user.
Primary Class
.step-wizardCommon Use Cases
- →E-commerce checkout flow split into Cart Review → Shipping Address → Payment Details → Order Confirmation
- →SaaS onboarding wizard guiding new users through Account Setup → Team Invites → Integration Selection → Dashboard Tour
- →Insurance quote form divided into Personal Details → Coverage Type → Risk Assessment → Quote Summary
- →Job application process broken into Contact Info → Work History → Skills & Qualifications → Document Upload → Review & Submit
Variants & Classes
| Variant | Description |
|---|---|
| Step Wizard Default | Standard step wizard with Bootstrap's default styling. |
| Step Wizard Responsive | Responsive variant that adapts to different screen sizes. |
Code Example
<div class="wizard">
<!-- Step Indicators -->
<div class="d-flex align-items-center justify-content-between mb-4 position-relative">
<div class="position-absolute top-50 start-0 end-0 translate-middle-y" style="height: 2px; background: #dee2e6; z-index: 0;"></div>
<div class="d-flex flex-column align-items-center position-relative" style="z-index: 1;">
<div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white bg-primary" style="width:40px;height:40px;">1</div>
<small class="mt-1 text-primary fw-semibold">Account</small>
</div>
<div class="d-flex flex-column align-items-center position-relative" style="z-index: 1;">
<div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white bg-primary" style="width:40px;height:40px;">2</div>
<small class="mt-1 text-primary fw-semibold">Profile</small>
</div>
<div class="d-flex flex-column align-items-center position-relative" style="z-index: 1;">
<div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-muted bg-light border" style="width:40px;height:40px;">3</div>
<small class="mt-1 text-muted">Billing</small>
</div>
<div class="d-flex flex-column align-items-center position-relative" style="z-index: 1;">
<div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-muted bg-light border" style="width:40px;height:40px;">4</div>
<small class="mt-1 text-muted">Confirm</small>
</div>
</div>
<!-- Step Content -->
<div class="card shadow-sm">
<div class="card-body p-4">
<!-- Step 1 -->
<div id="step-1">
<h5 class="card-title mb-1">Create Your Account</h5>
<p class="text-muted small mb-4">Step 1 of 4 — Enter your login credentials</p>
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<input type="email" class="form-control" id="email" placeholder="[email protected]">
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input type="password" class="form-control" id="password" placeholder="Min. 8 characters">
<div class="form-text">Use at least one uppercase letter and one number.</div>
</div>
</div>
<!-- Navigation -->
<div class="d-flex justify-content-between mt-4">
<button class="btn btn-outline-secondary" disabled>Back</button>
<button class="btn btn-primary">Continue <i class="bi bi-arrow-right ms-1"></i></button>
</div>
</div>
</div>
</div>Live Examples
Basic Step Wizard
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 wizard with custom colours
- ✓Step Wizard with interactive states
- ✓Responsive step wizard for all screen sizes
Best Practices
Validate each step before advancing
Trigger Bootstrap's native form validation on only the visible step's fields by calling `checkValidity()` on the current step's form group — not the entire form — so users see targeted errors rather than a full-page failure on step 4.
Persist step data in sessionStorage
Store each completed step's field values in `sessionStorage` as JSON so users who accidentally navigate away or refresh the page don't lose their progress — serialize the step's FormData object on the Continue click.
Mark completed steps visually with a checkmark
Swap the step number for a Bootstrap Icons `bi-check-lg` inside the circle and switch the background to `bg-success` once a step is validated and passed — this gives users a clear sense of forward progress.
Keep the connector line style in sync with state
Use a thin `div` or CSS `::after` pseudo-element for the connector line between steps and toggle its `background-color` between your brand primary and `#dee2e6` (Bootstrap's default border colour) as steps complete, so the progress is reflected in both the nodes and the track.