"Step Wizard"
Bootstrap 3.0.0 Snippet by andrewshell

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-xs-12"> <ul class="nav nav-pills nav-justified thumbnail"> <li><a href="#"> <h4 class="list-group-item-heading">Step 1</h4> <p class="list-group-item-text">First step description</p> </a></li> <li class="active"><a href="#"> <h4 class="list-group-item-heading">Step 2</h4> <p class="list-group-item-text">Second step description</p> </a></li> <li class="disabled"><a href="#"> <h4 class="list-group-item-heading">Step 3</h4> <p class="list-group-item-text">Third step description</p> </a></li> </ul> </div> </div> </div>
body{ margin-top:20px; }

Related: See More

Argon Design System
Form wizard (using tabs)
Bootstrap Material Wizard
Form Wizard and validation

Questions / Comments:

How to make this work?

Alex () - 10 years ago - Reply 0

You should make this actually work....

jasonsykoo () - 11 years ago - Reply 0

Look for wizard, there is one working from me. If you want to, you can make this work too.

Alex () - 11 years ago - Reply 0

Should be a switch, you'd presume. But that's not the purpose I reckon. :)

Ken Verhaegen () - 11 years ago - Reply 0

I assume that it would be a signup process or a checkout process. But I want it to actually work based on clicks without writing the JavaScript myself
Maybe I'll write some and submit it to make it better :))

jasonsykoo () - 11 years ago - Reply 0

This wasn't supposed to be a JavaScript solution out of the box, although there's no reason it couldn't be adapted to do so. I'm using it to show three steps in a process. Each step is it's own page. The idea is the current step is marked active and future steps are marked disabled. That way it shows easily what steps you've finished already and which ones are coming up.

Andrew Shell () - 10 years ago - Reply 0