How do I build a multi-step form with progress indicators using Bootstrap?

Asked on Jul 08, 2025

1 Answer

To create a multi-step form with progress indicators using Bootstrap 5, you can use the `nav` component to show steps and the `tab-content` for each form section. Here's a basic example:

<!-- BEGIN COPY / PASTE -->
        <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="step1-tab" data-bs-toggle="pill" data-bs-target="#step1" type="button" role="tab" aria-controls="step1" aria-selected="true">Step 1</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="step2-tab" data-bs-toggle="pill" data-bs-target="#step2" type="button" role="tab" aria-controls="step2" aria-selected="false">Step 2</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="step3-tab" data-bs-toggle="pill" data-bs-target="#step3" type="button" role="tab" aria-controls="step3" aria-selected="false">Step 3</button>
            </li>
        </ul>
        <div class="tab-content" id="pills-tabContent">
            <div class="tab-pane fade show active" id="step1" role="tabpanel" aria-labelledby="step1-tab">
                <h3>Step 1</h3>
                <p>Content for step 1.</p>
            </div>
            <div class="tab-pane fade" id="step2" role="tabpanel" aria-labelledby="step2-tab">
                <h3>Step 2</h3>
                <p>Content for step 2.</p>
            </div>
            <div class="tab-pane fade" id="step3" role="tabpanel" aria-labelledby="step3-tab">
                <h3>Step 3</h3>
                <p>Content for step 3.</p>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

Use the `nav-pills` class to create the step indicators.
Each step is a `nav-link` within a `nav-item`.
The `tab-content` contains `tab-pane` elements for each form step.
Use `data-bs-toggle="pill"` to switch between steps.
Ensure each `tab-pane` has a unique `id` and is linked to its corresponding `nav-link` using `data-bs-target`.

✅ Answered with Bootstrap 5

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions