Bootstrap 5 multi-step forms break long forms into manageable steps. This page covers 2 step wizard patterns — numbered wizard with progress bar and tab-style stepper.
Key Classes Reference
| Class | What It Does |
|---|---|
.progress-bar | Visual progress indicator |
.tab-pane | Content panel for each step |
.nav-pills | Tab-style step navigation |
data-bs-toggle="pill" | Bootstrap pill tab switching |
1. Bootstrap 5 Step Wizard Form
Multi-step form with numbered step indicators, progress bar and prev/next navigation.
2. Bootstrap 5 Tab-Style Step Form
Step form using Bootstrap nav-pills as clickable step indicators.
Frequently Asked Questions
In the changeStep function, before advancing run validation on visible inputs: const inputs = document.querySelectorAll('#step'+currentStep+' [required]'); let valid = true; inputs.forEach(i => { if(!i.value) { i.classList.add('is-invalid'); valid=false; } }); if(!valid) return. Only call changeStep if all required fields have values.
Store data in a JavaScript object that persists across steps: const formData = {}. On each Next click read the current step's inputs and add to formData. On final step submit, send the complete formData object to your API.
Calculate progress as: ((currentStep - 1) / (totalSteps - 1)) * 100. Update the progress-bar element's width style on each step change: progressBar.style.width = progress + '%'. Add transition: width 0.4s for smooth animation.
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.