Step Indicators
The Step Indicator is a visual representation of a user’s progress through a set of steps in order to complete a specified process. This should be used when certain tasks are long and need to be broken up into manageable chunks.
Examples
Horizontal
<div>
<ol class= "nav-steps" >
<li style= "width:33.3%" >
<a href= "" > Flight Information</a>
</li>
<li class= "active" style= "width:33.3%" >
<a href= "" > Shipment Information</a>
</li>
<li class= "" style= "width:33.3%" >
<a href= "" > Importer Information</a>
</li>
</ol>
</div>
Vertical
The veritcal style is useful for navigation or for “scroll spy” behavior.
<ol class= "nav-steps nav-stacked" >
<li>
<a href= "" > Flight Information</a>
</li>
<li class= "active" >
<a href= "" > Shipment Information</a>
</li>
<li>
<a href= "" > Importer Information</a>
</li>
</ol>
Dots
The dot step indicator is useful for very simple processes, like a tour.
<ol class= "nav-dots" >
<li>
<a href= "" > Step 1</a>
</li>
<li class= "active" >
<a href= "" > Step 2</a>
</li>
<li>
<a href= "" > Step 3</a>
</li>
</ol>