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
...
Step 2 content
...
Step 3 content
...
<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
...
Step 2 content
...
Step 3 content
...
<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>