Bootstrap 5 stepper components built with CSS and vanilla JavaScript. Bootstrap has no native stepper — these patterns show the standard implementation approaches.
Key CSS Pattern
.step { flex: 1; text-align: center; position: relative; }
.step:not(:first-child)::before {
content: '';
position: absolute;
top: 14px; left: -50%; right: 50%;
height: 2px; background: #dee2e6;
}
.step.done::before { background: #fd4766; }
1. Bootstrap 5 Horizontal Stepper
Horizontal numbered stepper with completed, active and pending states.
2. Bootstrap 5 Vertical Stepper
Vertical stepper with content panels below each step — useful for long setup flows.
3. Bootstrap 5 Icon Stepper
Stepper with emoji/icon steps instead of numbers — visually rich for onboarding flows.
4. Bootstrap 5 Interactive Stepper
Clickable stepper with JavaScript navigation — prev/next buttons advance through steps.
Frequently Asked Questions
Bootstrap 5 has no built-in stepper. Build it with CSS: a flex container, each step has a relative-positioned number circle, and the connector line uses ::before pseudo-elements. JavaScript handles active/done class toggling on prev/next button clicks.
Replace the step number with a checkmark character: ✓ or a Bootstrap Icon. In JavaScript: if step is done, set innerHTML to '✓'. If active or pending, show the step number. Or use CSS: .step.done .step-num::after { content: '✓'; } with absolute positioning.
Use a ::before pseudo-element on each step (except the first): position:absolute; left:-50%; right:50%; top:14px; height:2px; background:#dee2e6. For completed steps change background to your brand color. The step container needs position:relative.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.