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.
Demo
Usage
Here’s what you need to do to your existing tabs:
- Make sure you’re using
.nav-pills - Add a
.nav-wizardclass 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>
</ul>
Then add the css (or less) from below and that’s it!