## Documentation

Browse source code

##### On this page

- Default markup
- Tooltips
- Color
- Steps without title
- Steps with numbers

## Steps

Steps are used to guide users through complex processes, making them easier and more intuitive. Breaking a multi-step process into smaller parts and tracking progress along the way helps users complete it successfully.

## Default markup

Steps show users where they are within a process, what steps they have already completed and what they are expected to complete. Making multi-step processes more user-friendly facilitates users’ interaction with your interface.

Use the `steps` class to create the default progress tracker and name the steps accordingly.

    <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

Add tooltips, if you want to provide users with additional information about the steps they are expected to complete. Tooltips are displayed when a user hovers over a given step and help clarify what might not be clear from the interface.

    <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

You can customize the default progress indicator by changing the color to one that better suits your design. Click here to see the range of available colors.

    <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

For designs with limited space, use progress indicators without titles and add tooltips to provide the necessary details.

    <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

Use the `steps-counter` class to create a progress tracker with numbers instead of titles and change the color to customize it.

    <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>