Documentation

Browse source code
Introduction Alerts Autosize Avatars Badges Breadcrumb Buttons Cards Carousel Colors Countup Cursors Charts Divider Empty states Flags Form elements Form helpers Form input mask Layout Progress Payments Range slider Ribbons New Spinners Steps Tables Tabs Timelines Toasts Tooltips Typography

Steps

Steps are progress indicators of a sequence of task steps.

Default markup

Step 1 Step 2 Step 3 Step 4 
<div class="steps">
   <a href="#" class="step-item">
      Step 1
   </a>
   <a href="#" class="step-item">
      Step 2
   </a>
   <a href="#" class="step-item active">
      Step 3
   </a>
   <span href="#" class="step-item">
      Step 4
   </span>
</div>

Tooltips

Step 1 Step 2 Step 3 Step 4 
<div class="steps">
   <a href="#" class="step-item" data-toggle="tooltip" title="Step 1 description">
      Step 1
   </a>
   <a href="#" class="step-item" data-toggle="tooltip" title="Step 2 description">
      Step 2
   </a>
   <a href="#" class="step-item active" data-toggle="tooltip" title="Step 3 description">
      Step 3
   </a>
   <span href="#" class="step-item" data-toggle="tooltip" title="Step 4 description">
      Step 4
   </span>
</div>

Color

Step 1 Step 2 Step 3 Step 4
Step 1 Step 2 Step 3 Step 4 
<div class="steps steps-green">
   <a href="#" class="step-item">
      Step 1
   </a>
   <a href="#" class="step-item">
      Step 2
   </a>
   <a href="#" class="step-item active">
      Step 3
   </a>
   <span href="#" class="step-item">
      Step 4
   </span>
</div>
<div class="steps steps-red">
   <a href="#" class="step-item">
      Step 1
   </a>
   <a href="#" class="step-item">
      Step 2
   </a>
   <a href="#" class="step-item active">
      Step 3
   </a>
   <span href="#" class="step-item">
      Step 4
   </span>
</div>

Steps without title

<div class="steps">
   <a href="#" class="step-item" data-toggle="tooltip" title="Step 1 description"></a>
   <a href="#" class="step-item" data-toggle="tooltip" title="Step 2 description"></a>
   <a href="#" class="step-item active" data-toggle="tooltip" title="Step 3 description"></a>
   <span href="#" class="step-item" data-toggle="tooltip" title="Step 4 description"></span>
</div>

Steps with numbers

<div class="steps steps-counter steps-lime">
   <a href="#" class="step-item"></a>
   <a href="#" class="step-item active"></a>
   <span href="#" class="step-item"></span>
   <span href="#" class="step-item"></span>
   <span href="#" class="step-item"></span>
</div>