Get support Purchase Now Preview Demo

WizardExclusive

Create a multi-step form to get more leads and increase engagement.

Example

Combine tabs with this custom wizard component by adding data-toggle="wizard" to the buttons, e.g. <a data-toggle="wizard" href="#wizardStepTwo">. It will connect with the tabs navigation and work automatically.
We use .steps class on .nav for the best style.

Step 1 content

...

Next

Step 2 content

...

Previous Next

Step 3 content

...

Previous 
<ul class="nav nav-pills steps mb-7" id="wizard-tab" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="wizardTabOne" data-bs-toggle="pill" data-bs-target="#wizardStepOne" type="button" role="tab" aria-controls="wizardStepOne" aria-selected="true">
            1
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="wizardTabTwo" data-bs-toggle="pill" data-bs-target="#wizardStepTwo" type="button" role="tab" aria-controls="wizardStepTwo" aria-selected="false">
            2
        </button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="wizardTabThree" data-bs-toggle="pill" data-bs-target="#wizardStepThree" type="button" role="tab" aria-controls="wizardStepThree" aria-selected="false">
            3
        </button>
    </li>
</ul>
 
<div class="tab-content" id="wizard-tabContent">
    <div class="tab-pane fade show active" id="wizardStepOne" role="tabpanel" aria-labelledby="wizardTabOne">
        <div class="card h-300px">
            <div class="card-body">
                <h4>Step 1 content</h4>
                <p>...</p>
            </div>
            
            <div class="card-footer">
                <div class="d-flex justify-content-between">
                    <!-- Button -->
                    <button type="button" class="btn btn-light">Cancel</button>
 
                    <!-- Button -->
                    <a class="btn btn-primary" data-toggle="wizard" href="#wizardStepTwo">Next</a>
                </div>
            </div>
        </div>
    </div>
 
    <div class="tab-pane fade" id="wizardStepTwo" role="tabpanel" aria-labelledby="wizardTabTwo">
        <div class="card h-300px">
            <div class="card-body">
                <h4>Step 3 content</h4>
                <p>...</p>
            </div>
            
            <div class="card-footer">
                <div class="d-flex justify-content-between">
                    <!-- Button -->
                    <a class="btn btn-light" data-toggle="wizard" href="#wizardStepOne">Previous</a>
 
                    <!-- Button -->
                    <a class="btn btn-primary" data-toggle="wizard" href="#wizardStepThree">Next</a>
                </div>
            </div>
        </div>
    </div>
 
    <div class="tab-pane fade" id="wizardStepThree" role="tabpanel" aria-labelledby="wizardTabThree">
        <div class="card h-300px">
            <div class="card-body">
                <h4>Step 3 content</h4>
                <p>...</p>
            </div>
            
            <div class="card-footer">
                <div class="d-flex justify-content-between">
                    <!-- Button -->
                    <a class="btn btn-light" data-toggle="wizard" href="#wizardStepTwo">Previous</a>
 
                    <!-- Button -->
                    <button type="button" class="btn btn-primary">Send</button>
                </div>
            </div>
        </div>
    </div>
</div>

Vertical

Use .steps and .steps-vertical classes together for vertical layout.

Step 1 content

...

Next

Step 2 content

...

Previous Next

Step 3 content

...

Previous 
<div class="row">
    <div class="col-2 col-lg-1">
        <ul class="nav nav-pills steps steps-vertical h-400px" id="wizard-tab-vertical" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="wizardTabOneVertical" data-bs-toggle="pill" data-bs-target="#wizardStepOneVertical" type="button" role="tab" aria-controls="wizardStepOneVertical" aria-selected="true">
                    1
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="wizardTabTwoVertical" data-bs-toggle="pill" data-bs-target="#wizardStepTwoVertical" type="button" role="tab" aria-controls="wizardStepTwoVertical" aria-selected="false">
                    2
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="wizardTabThreeVertical" data-bs-toggle="pill" data-bs-target="#wizardStepThreeVertical" type="button" role="tab" aria-controls="wizardStepThreeVertical" aria-selected="false">
                    3
                </button>
            </li>
        </ul>
    </div>
 
    <div class="col">
        <div class="tab-content" id="wizard-tabContent-vertical">
            <div class="tab-pane fade show active" id="wizardStepOneVertical" role="tabpanel" aria-labelledby="wizardTabOneVertical">
                <div class="card h-400px">
                    <div class="card-body">
                        <h4>Step 1 content</h4>
                        <p>...</p>
                    </div>
                    <div class="card-footer">
                        <div class="d-flex justify-content-between">
                            <!-- Button -->
                            <button type="button" class="btn btn-light">Cancel</button>
 
                            <!-- Button -->
                            <a class="btn btn-primary" data-toggle="wizard" href="#wizardStepTwoVertical">Next</a>
                        </div>
                    </div>
                </div>
            </div>
 
            <div class="tab-pane fade" id="wizardStepTwoVertical" role="tabpanel" aria-labelledby="wizardTabTwoVertical">
                <div class="card h-400px">
                    <div class="card-body">
                        <h4>Step 2 content</h4>
                        <p>...</p>
                    </div>
                    <div class="card-footer">
                        <div class="d-flex justify-content-between">
                            <!-- Button -->
                            <a class="btn btn-light" data-toggle="wizard" href="#wizardStepOneVertical">Previous</a>
 
                            <!-- Button -->
                            <a class="btn btn-primary" data-toggle="wizard" href="#wizardStepThreeVertical">Next</a>
                        </div>
                    </div>
                </div>
            </div>
 
            <div class="tab-pane fade" id="wizardStepThreeVertical" role="tabpanel" aria-labelledby="wizardTabThreeVertical">
                <div class="card h-400px">
                    <div class="card-body">
                        <h4>Step 3 content</h4>
                        <p>...</p>
                    </div>
                    <div class="card-footer">
                        <div class="d-flex justify-content-between">
                            <!-- Button -->
                            <a class="btn btn-light" data-toggle="wizard" href="#wizardStepTwoVertical">Previous</a>
 
                            <!-- Button -->
                            <button type="button" class="btn btn-primary">Send</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>