Bootstrap 4 Stepper

Bootstrap 4 Stepper component

Bootstrap stepper is a component that displays content as a process with defined by user milestones. Following steps are separated and connected by buttons.

Basic Bootstrap 4 version

Edit in sandbox 
        
            
<!-- Horizontal Steppers -->
<div class="row">
  <div class="col-md-12">

    <!-- Stepers Wrapper -->
    <ul class="stepper stepper-horizontal">

      <!-- First Step -->
      <li class="completed">
        <a href="#!">
          <span class="circle">1</span>
          <span class="label">First step</span>
        </a>
      </li>

      <!-- Second Step -->
      <li class="active">
        <a href="#!">
          <span class="circle">2</span>
          <span class="label">Second step</span>
        </a>
      </li>

      <!-- Third Step -->
      <li class="warning">
        <a href="#!">
          <span class="circle"><i class="fas fa-exclamation"></i></span>
          <span class="label">Third step</span>
        </a>
      </li>

    </ul>
    <!-- /.Stepers Wrapper -->

  </div>
</div>
<!-- /.Horizontal Steppers -->

Above is an example template for a Stepper in the Bootstrap 4 version based on jQuery. V4 is an older version of Bootstrap and we discourage implementing it in new projects.

Below you will find the same component but in the latest, more modern Bootstrap 5. We encourage you to use the v5 version instead, the v5 is more lightweight, more reliable and based on pure JavaScript instead of jQuery.

This page only compares the two version, you can find full documentation - with multiple options & API details via one of the links below:
Bootstrap v5 - full documentation Bootstrap v4 - full documentation

Basic Bootstrap 5 version

  • 1 step1
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
  • 2 step2
  • 3 step3
Edit in sandbox 
        
            
      <ul class="stepper" data-mdb-stepper-init>
        <li class="stepper-step stepper-active">
          <div class="stepper-head">
            <span class="stepper-head-icon">1</span>
            <span class="stepper-head-text">step1</span>
          </div>
          <div class="stepper-content py-3">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua
          </div>
        </li>
        <li class="stepper-step">
          <div class="stepper-head">
            <span class="stepper-head-icon">2</span>
            <span class="stepper-head-text">step2</span>
          </div>
          <div class="stepper-content py-3">
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
            ex ea commodo consequat
          </div>
        </li>
        <li class="stepper-step">
          <div class="stepper-head">
            <span class="stepper-head-icon">3</span>
            <span class="stepper-head-text">step3</span>
          </div>
          <div class="stepper-content py-3">
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
            fugiat nulla pariatur
          </div>
        </li>
      </ul>