Documentation

Browse source code
On this page

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>