Submit your widget

bootstrap application wizard

Created 4 years ago   Views 17523   downloads 3875    Author amoffat
bootstrap application wizard
View DemoDownload 286.8 KB
49
Share |

Bootstrap Application Wizard

Installation

CSS

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

Javascript

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

Usage

1) Create wizard

<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

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

Read more:https://github.com/amoffat/bootstrap-application-wizard

Tag: form