Installation

CSS

1<link href="bootstrap-wizard/bootstrap-wizard.css" rel="stylesheet" />

Javascript

1<script src="bootstrap-wizard/bootstrap-wizard.js" type="text/javascript"></script>

Usage

1) Create wizard

1<div class="wizard" id="some-wizard" data-title="Wizard Title"></div>

To set the title of the application wizard use the data-title attribute

2) Create wizard cards

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

1<div class="wizard-card" data-cardname="card1">
2    <h3>Card 1</h3>
3    Some content
4</div>

Basic Wizard Setup

1<div class="wizard" id="some-wizard" data-title="Wizard Title">
2    <div class="wizard-card" data-cardname="card1">
3        <h3>Card 1</h3>
4        Some content
5    </div>
6    
7    <div class="wizard-card" data-cardname="card2">
8        <h3>Card 2</h3>
9        Some content
10    </div>
11</div>

3) Initialize Wizard

After setting up the wizard with it's cards you can initialize it.

1$(function() {
2    var options = {};
3    var wizard = $("#some-wizard").wizard(options);
4});