Wizard Style Navigation Tabs for Bootstrap

12 March, 2014

Get wizard style navigations tabs by adding this small bit of CSS to your project.

UPDATE 2016-09-27: Thanks to Talal Alenizi for a great CSS update. The HTML syntax is now super simple. Just use your bootstrap pills navigation.



Here’s what you need to do to your existing tabs:

  • Make sure you’re using .nav-pills
  • Add a .nav-wizard class to your tabs


<ul class="nav nav-pills nav-wizard">
    <li class="active"><a href="#" data-toggle="tab">Home</a></li>
    <li><a href="#" data-toggle="tab">About</a></li>
    <li><a href="#" data-toggle="tab">Contact</a></li>

Then add the css (or less) from below and that’s it!

Full Code (CSS and LESS)