The only thing better than a Bootstrap-styled user interface is a wizard written using Bootstrap.js, and Vincent Gabriel’s oh-so-capable Twitter Bootstrap Wizard Plugin lets create one quickly and easily. What I wanted was a step-by-step wizard with a lot of features:
- Customizable Previous and Next buttons
- A Customizable Finish button
- Support for an arbitrary number of steps
- A progress bar
Here’s what the sequence should look like visually:
Twitter Bootstrap Wizard Example Step 1.
Note how in Step 1 the First and Previous buttons are disabled, as they should be. You can use class and style attributes to modify default behavior.
Twitter Bootstrap Wizard Example Step 2.
In Step 2 the First and Previous buttons have automatically become active.
Twitter Bootstrap Wizard Example Step 3.
In Step 3 the Finish button has automatically been replaced with a Done button. The default behavior for the Done button is to appear as disabled, but that behavior is easily modified using a bit of jQuery.
I think Bootstrap has changed in such a way that Vince’s code no longer works as written with the current version. At least I couldn’t get it to work, but I’m pretty sure that’s more a reflection on me than Vince. Not being a Bootstrap expert I had to go back to first principles and understand their tab markup, then add Vince’s good work on top of that.
By the way, I try to include running code here through the use of CDNs, but the Twitter Bootstrap Wizard Plugin isn’t available on cdnjs, even though it appears to be.
Here’s the complete running program.
Assumptions for the Twitter Bootstrap Wizard tutorial:
Since I don’t have a demo, here’s the complete code listing before I get into the explanation.
An error has occurred. Please try again later.
Step by step Markup Tutorial for a Bootstrap Wizard With Progress Bar
0. Create a surrounding div
The whole thing must be surrounded by a simple div with an ID you assign the name of the wizard,
rootwizard in this example:
1. Tab markup: Unordered list
- The markup for the tabs themselves is an unordered list with
class="nav nav-tabs" role="tablist"in the
- Each tab is in an
litag with a unique named anchor on the same page, for example,
litag must use
data-toggle="tab"attributes. FWIW I was able to omit the
role="tab"but that seems like a bad thing for forward compatibility.
2. Progress bar markup:
div of class “progress” and nested
div of class “progress-bar”
- Create a div of class “progress”. It doesn’t need an ID
- Inside it nest a div of class “progress-bar”. It requires an ID, in this case, I used progressBar. jQuery will be used to update the div dynamically as the user clicks Previous and Next buttons and it needs the ID to know which
divto work on.
The “progress-bar-striped” attribute is optional. It looks more dynamic and gives the user a feeling of real progress while filling out a form.
I put the progress bar just below the tabs but it can go anywhere. For example, it looks just as good if you switch steps 2 and 3.
3. Tab pane markup: div of class “tab-content” with nested divs of class “tab-pane”
The tab panes are where content goes. You can only see one at a time, even though they’re all in a single piece of markup.
- Create a
divof class “tab-content” to enclose all tab pane
divs. It doesn’t need an ID.
- The tab panes are separate
divs of class “tab-pane” nested inside the class “tab-content”
div. Each tab pane has a separate ID, which must match the named anchors in the
lideclarations in Step 1.
- The first tab tab pane has “active” in its
classattribute. That selects the tab on page load.
4. Previous/Next Buttons: Unordered list of class “page wizard”
The First, Next, Previous, and Done buttons make clever use of the unordered list markup.
ulmust include the attribute
They do not need to be named First, Next, Previous, and Done because their function and position are both determined by a
litag contains an
alink as the target.
As a bonus I’ve included access key attributes on the
a links, which have nothing to do with the wizard. I just like keyboard shortcuts. Access keys let you use a letter key in conjunction with a system-defined key or key set to activate a control. For example, the Next button uses
a href="#" accesskey="n". On a PC you’d press Alt+N key as the equivalent of the Next button, and on a Mac it would be Control+Option+N
5. Load the jquery.bootstrap.wizard.min.js in a script tag
The magic in Vince’s progress bar code is in using jQuery to redraw the Bootstrap-provided progress bar div according to which tab is selected:
I added a few lines of optional code. For example, this section makes sure the Done button appears only when at the last tab, and that it’s active:
In Vince’s code, the Next button appears on the last tab, although it’s disabled. In my version, it’s removed on the last tab only: