Bootstrap addon that allows multi-step forms to progress in a natural order while remaining flexible.
CSS
<link href="bootstrap-wizard/bootstrap-wizard.css" rel="stylesheet" />
Javascript
<script src="bootstrap-wizard/bootstrap-wizard.js" type="text/javascript"></script>
<div class="wizard" id="some-wizard" data-title="Wizard Title"></div>
To set the title of the application wizard use the data-title
attribute
Each .wizard-card will be its own step in the Application Wizard, and the h3 tag will be used for its navigation name on the left. Also notice the data-cardname
attribute on each card. While not required, this can be used to access the cards by a specific name.
Card Setup
<div class="wizard-card" data-cardname="card1">
<h3>Card 1</h3>
Some content
</div>
Basic Wizard Setup
<div class="wizard" id="some-wizard" data-title="Wizard Title">
<div class="wizard-card" data-cardname="card1">
<h3>Card 1</h3>
Some content
</div>
<div class="wizard-card" data-cardname="card2">
<h3>Card 2</h3>
Some content
</div>
</div>
After setting up the wizard with it's cards you can initialize it.
$(function() {
var options = {};
var wizard = $("#some-wizard").wizard(options);
});
Information
4.0
© 2013-2021 All rights reserved.
Built with Next.js. Designed with ♥ in Montreal