Skip to content
Responsive wizard with expanding sub steps for Bootstrap 3
CSS JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo demo Sep 8, 2014
dist update dist Sep 9, 2014
screenshots No commit message Sep 7, 2014
src comments Sep 9, 2014
vendor/bootstrap/less No commit message Sep 7, 2014
LICENSE No commit message Sep 7, 2014
README.md

README.md

BootstrapWizard - v0.1

http://www.bootstrapwizard.com

Responsive Bootstrap 3 Wizard

Designed as a clean wizard to be used in a Bootstrap Panel, a Modal, etc.

Screenshot

Usage

<div class="wizard">
    <ul class="nav nav-wizard">
        <li>
            <a href="#step1">Step 1</a>
        </li>
        ...
    </ul>
            
    <div class="wizard-pane" id="step1">
        <h3>Step 1</h3>
        <form>
        ...
        </form>
    </div>
    ...
</div>
$(".wizard").bootstrapWizard(options);

Options

nametypedefaultdescription
widthnumericnullwidth of the wizard
heightnumeric300height of wizard
cancelButtonbooleanfalsedisplay the cancel button
footerButtonsbooleantruedisplay the footer buttons
progressBarbooleantruedisplay the progress bar
buttonTextobject
{
  cancel: "Cancel",
  next: "Next",
  back: "Back",
  submit: "Submit",
}
text for the buttons

Methods

methoddescription
markAllVisitedmark all nav items as visited
serializeserialize all the form data

Events

event typedescription
show.bwfired when a nav is selected but has not yet been displayed
submit.bwfires when the submit button is clicked

Inspired by Andrew Moffat's Bootstrap Application Wizard

Sub step collapse credit to Osman Nuri Okumuş MetisMenu

You can’t perform that action at this time.