Sign in


Sign up


Bootstrap Steps (stepper)

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

This is a great solution for a variety of registration forms, where you don't want to scare the user with loads of fields and questions.

Stepper can be aligned vertically as well as horizontally.

Examples of Bootstrap steps use:

  • Registration form
  • Payment gateway
  • Tutorial with steps

See the following Bootstrap stepper examples:


Registration form with steps MDB Pro component

Registration form

Basic Information

Personal Data

Terms and conditions

Finish

Registration completed!

                
.steps-form-2 {
  display: table;
  width: 100%;
  position: relative; }
  .steps-form-2 .steps-row-2 {
    display: table-row; }
    .steps-form-2 .steps-row-2:before {
      top: 14px;
      bottom: 0;
      position: absolute;
      content: " ";
      width: 100%;
      height: 2px;
      background-color: #7283a7; }
    .steps-form-2 .steps-row-2 .steps-step-2 {
      display: table-cell;
      text-align: center;
      position: relative; }
      .steps-form-2 .steps-row-2 .steps-step-2 p {
        margin-top: 0.5rem; }
      .steps-form-2 .steps-row-2 .steps-step-2 button[disabled] {
        opacity: 1 !important;
        filter: alpha(opacity=100) !important; }
      .steps-form-2 .steps-row-2 .steps-step-2 .btn-circle-2 {
        width: 70px;
        height: 70px;
        border: 2px solid #59698D;
        background-color: white !important;
        color: #59698D !important;
        border-radius: 50%;
        padding: 22px 18px 15px 18px;
        margin-top: -22px; }
        .steps-form-2 .steps-row-2 .steps-step-2 .btn-circle-2:hover {
          border: 2px solid #4285F4;
          color: #4285F4 !important;
          background-color: white !important; }
        .steps-form-2 .steps-row-2 .steps-step-2 .btn-circle-2 .fa {
          font-size: 1.7rem; }
                
            
                
// Tooltips Initialization
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

// Steppers                
$(document).ready(function () {
  var navListItems = $('div.setup-panel-2 div a'),
          allWells = $('.setup-content-2'),
          allNextBtn = $('.nextBtn-2'),
          allPrevBtn = $('.prevBtn-2');

  allWells.hide();

  navListItems.click(function (e) {
      e.preventDefault();
      var $target = $($(this).attr('href')),
              $item = $(this);

      if (!$item.hasClass('disabled')) {
          navListItems.removeClass('btn-amber').addClass('btn-blue-grey');
          $item.addClass('btn-amber');
          allWells.hide();
          $target.show();
          $target.find('input:eq(0)').focus();
      }
  });
  
  allPrevBtn.click(function(){
      var curStep = $(this).closest(".setup-content-2"),
          curStepBtn = curStep.attr("id"),
          prevStepSteps = $('div.setup-panel-2 div a[href="#' + curStepBtn + '"]').parent().prev().children("a");

          prevStepSteps.removeAttr('disabled').trigger('click');
  });

  allNextBtn.click(function(){
      var curStep = $(this).closest(".setup-content-2"),
          curStepBtn = curStep.attr("id"),
          nextStepSteps = $('div.setup-panel-2 div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
          curInputs = curStep.find("input[type='text'],input[type='url']"),
          isValid = true;

      $(".form-group").removeClass("has-error");
      for(var i=0; i< curInputs.length; i++){
          if (!curInputs[i].validity.valid){
              isValid = false;
              $(curInputs[i]).closest(".form-group").addClass("has-error");
          }
      }

      if (isValid)
          nextStepSteps.removeAttr('disabled').trigger('click');
  });

  $('div.setup-panel-2 div a.btn-amber').trigger('click');
});
                
            
                
<h2 class="text-center font-bold pt-4 pb-5 mb-5"><strong>Registration form with steps</strong></h2>

<div class="steps-form-2">
    <div class="steps-row-2 setup-panel-2 d-flex justify-content-between">
        <div class="steps-step-2">
            <a href="#step-4" type="button" class="btn btn-amber btn-circle-2 waves-effect ml-0" data-toggle="tooltip" data-placement="top" title="Basic Information"><i class="fa fa-folder-open-o" aria-hidden="true"></i></a>
        </div>
        <div class="steps-step-2">
            <a href="#step-5" type="button" class="btn btn-blue-grey btn-circle-2 waves-effect" data-toggle="tooltip" data-placement="top" title="Personal Data"><i class="fa fa-pencil" aria-hidden="true"></i></a>
        </div>
        <div class="steps-step-2">
            <a href="#step-6" type="button" class="btn btn-blue-grey btn-circle-2 waves-effect" data-toggle="tooltip" data-placement="top" title="Terms and Conditions"><i class="fa fa-photo" aria-hidden="true"></i></a>
        </div>
        <div class="steps-step-2">
            <a href="#step-7" type="button" class="btn btn-blue-grey btn-circle-2 waves-effect mr-0" data-toggle="tooltip" data-placement="top" title="Finish"><i class="fa fa-check" aria-hidden="true"></i></a>
        </div>
    </div>
</div>

<form role="form" action="" method="post">
    <div class="row setup-content-2" id="step-4">
        <div class="col-md-12">
            <h3 class="font-bold pl-0 my-4"><strong>Basic Information</strong></h3>
            <div class="form-group md-form">
                <label for="yourEmail-2" data-error="wrong" data-success="right">Email</label>
                <input id="yourEmail-2" type="email" required="required" class="form-control validate">
            </div>
            <div class="form-group md-form">
                <label for="yourUsername-2" data-error="wrong" data-success="right">Username</label>
                <input id="yourUsername-2" type="text" required="required" class="form-control validate">
            </div>
            <div class="form-group md-form mt-3">
                <label for="yourPassword-2" data-error="wrong" data-success="right">Password</label>
                <input id="yourPassword-2" type="password" required="required" class="form-control validate">
            </div>
            <div class="form-group md-form mt-3">
                <label for="repeatPassword-2" data-error="wrong" data-success="right">Repeat Password</label>
                <input id="repeatPassword-2" type="password" required="required" class="form-control validate">
            </div>
            <button class="btn btn-mdb-color btn-rounded nextBtn-2 float-right" type="button">Next</button>
        </div>
    </div>
    <div class="row setup-content-2" id="step-5">
        <div class="col-md-12">
            <h3 class="font-bold pl-0 my-4"><strong>Personal Data</strong></h3>
            <div class="form-group md-form">
                <label for="yourName-2" data-error="wrong" data-success="right">First Name</label>
                <input id="yourName-2" type="text" required="required" class="form-control validate">
            </div>
            <div class="form-group md-form mt-3">
                <label for="secondName-2" data-error="wrong" data-success="right">Second Name</label>
                <input id="secondName-2" type="text" required="required" class="form-control validate">
            </div>
            <div class="form-group md-form">
                <label for="surname-2" data-error="wrong" data-success="right">Surname</label>
                <input id="surname-2" type="text" required="required" class="form-control validate">
            </div>
            <div class="form-group md-form mt-3">
                <label for="yourAddress-2" data-error="wrong" data-success="right">Address</label>
                <textarea id="yourAddress-2" type="text" required="required" class="md-textarea validate"></textarea>
            </div>
            <button class="btn btn-mdb-color btn-rounded prevBtn-2 float-left" type="button">Previous</button>
            <button class="btn btn-mdb-color btn-rounded nextBtn-2 float-right" type="button">Next</button>
        </div>
    </div>
    <div class="row setup-content-2" id="step-6">
        <div class="col-md-12">
            <h3 class="font-bold pl-0 my-4"><strong>Terms and conditions</strong></h3>
            <div class="form-group">
                <input type="checkbox" id="checkbox111">
                <label for="checkbox111">I agree to the terms and conditions</label>
            </div>
            <div class="form-group">
                <input type="checkbox" id="checkbox112">
                <label for="checkbox112">I want to receive newsletter</label>
            </div>
            <button class="btn btn-mdb-color btn-rounded prevBtn-2 float-left" type="button">Previous</button>
            <button class="btn btn-mdb-color btn-rounded nextBtn-2 float-right" type="button">Next</button>
        </div>
    </div>
    <div class="row setup-content-2" id="step-7">
        <div class="col-md-12">
            <h3 class="font-bold pl-0 my-4"><strong>Finish</strong></h3>
            <h2 class="text-center font-bold my-4">Registration completed!</h2>
            <button class="btn btn-mdb-color btn-rounded prevBtn-2 float-left" type="button">Previous</button>
            <button class="btn btn-success btn-rounded float-right" type="submit">Submit</button>
        </div>
    </div>
</form>
                
            

Vertical registration form steps MDB Pro component

Basic Information

Personal Data

Terms and conditions

Finish

Registration completed!

                
.steps-form-3 {
  width: 2px;
  height: 470px;
  position: relative; }
  .steps-form-3 .steps-row-3 {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column; }
    .steps-form-3 .steps-row-3:before {
      top: 14px;
      bottom: 0;
      position: absolute;
      content: "";
      width: 2px;
      height: 100%;
      background-color: #7283a7; }
    .steps-form-3 .steps-row-3 .steps-step-3 {
      height: 150px;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      text-align: center;
      position: relative; }
      .steps-form-3 .steps-row-3 .steps-step-3.no-height {
        height: 50px; }
      .steps-form-3 .steps-row-3 .steps-step-3 p {
        margin-top: 0.5rem; }
      .steps-form-3 .steps-row-3 .steps-step-3 button[disabled] {
        opacity: 1 !important;
        filter: alpha(opacity=100) !important; }
      .steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 {
        width: 60px;
        height: 60px;
        border: 2px solid #59698D;
        background-color: white !important;
        color: #59698D !important;
        border-radius: 50%;
        padding: 18px 18px 15px 15px;
        margin-top: -22px; }
        .steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3:hover {
          border: 2px solid #4285F4;
          color: #4285F4 !important;
          background-color: white !important; }
        .steps-form-3 .steps-row-3 .steps-step-3 .btn-circle-3 .fa {
          font-size: 1.7rem; }
                
            
                
$(document).ready(function () {
  var navListItems = $('div.setup-panel-3 div a'),
          allWells = $('.setup-content-3'),
          allNextBtn = $('.nextBtn-3'),
          allPrevBtn = $('.prevBtn-3');

  allWells.hide();

  navListItems.click(function (e) {
      e.preventDefault();
      var $target = $($(this).attr('href')),
              $item = $(this);

      if (!$item.hasClass('disabled')) {
          navListItems.removeClass('btn-info').addClass('btn-pink');
          $item.addClass('btn-info');
          allWells.hide();
          $target.show();
          $target.find('input:eq(0)').focus();
      }
  });
  
  allPrevBtn.click(function(){
      var curStep = $(this).closest(".setup-content-3"),
          curStepBtn = curStep.attr("id"),
          prevStepSteps = $('div.setup-panel-3 div a[href="#' + curStepBtn + '"]').parent().prev().children("a");

          prevStepSteps.removeAttr('disabled').trigger('click');
  });

  allNextBtn.click(function(){
      var curStep = $(this).closest(".setup-content-3"),
          curStepBtn = curStep.attr("id"),
          nextStepSteps = $('div.setup-panel-3 div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
          curInputs = curStep.find("input[type='text'],input[type='url']"),
          isValid = true;

      $(".form-group").removeClass("has-error");
      for(var i=0; i< curInputs.length; i++){
          if (!curInputs[i].validity.valid){
              isValid = false;
              $(curInputs[i]).closest(".form-group").addClass("has-error");
          }
      }

      if (isValid)
          nextStepSteps.removeAttr('disabled').trigger('click');
  });

  $('div.setup-panel-3 div a.btn-info').trigger('click');
});
                
            
                
<!-- Grid row -->
<div class="row pt-5 d-flex justify-content-center">

    <!-- Grid column -->
    <div class="col-md-2 pl-5 pl-md-0 pb-5">

        <div class="steps-form-3">
            <div class="steps-row-3 setup-panel-3 d-flex justify-content-between">
                <div class="steps-step-3">
                    <a href="#step-8" type="button" class="btn btn-info btn-circle-3 waves-effect ml-0" data-toggle="tooltip" data-placement="top" title="Basic Information"><i class="fa fa-folder-open-o" aria-hidden="true"></i></a>
                </div>
                <div class="steps-step-3">
                    <a href="#step-9" type="button" class="btn btn-pink btn-circle-3 waves-effect p-3" data-toggle="tooltip" data-placement="top" title="Basic Information"><i class="fa fa-user" aria-hidden="true"></i></a>
                </div>
                <div class="steps-step-3">
                    <a href="#step-10" type="button" class="btn btn-pink btn-circle-3 waves-effect" data-toggle="tooltip" data-placement="top" title="Basic Information"><i class="fa fa-heart-o" aria-hidden="true"></i></a>
                </div>
                <div class="steps-step-3 no-height">
                    <a href="#step-11" type="button" class="btn btn-pink btn-circle-3 waves-effect p-3" data-toggle="tooltip" data-placement="top" title="Basic Information"><i class="fa fa-check" aria-hidden="true"></i></a>
                </div>
            </div>
        </div>

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-md-7">

        <form role="form" action="" method="post">
            <div class="row setup-content-3" id="step-8">
                <div class="col-md-12">
                    <h3 class="font-bold pl-0 my-4"><strong>Basic Information</strong></h3>
                    <div class="form-group md-form">
                        <label for="yourEmail-3" data-error="wrong" data-success="right">Email</label>
                        <input id="yourEmail-3" type="email" required="required" class="form-control validate">
                    </div>
                    <div class="form-group md-form">
                        <label for="yourUsername-3" data-error="wrong" data-success="right">Username</label>
                        <input id="yourUsername-3" type="text" required="required" class="form-control validate">
                    </div>
                    <div class="form-group md-form mt-3">
                        <label for="yourPassword-3" data-error="wrong" data-success="right">Password</label>
                        <input id="yourPassword-3" type="password" required="required" class="form-control validate">
                    </div>
                    <div class="form-group md-form mt-3">
                        <label for="repeatPassword-3" data-error="wrong" data-success="right">Repeat Password</label>
                        <input id="repeatPassword-3" type="password" required="required" class="form-control validate">
                    </div>
                    <button class="btn btn-mdb-color btn-rounded nextBtn-3 float-right" type="button">Next</button>
                </div>
            </div>
            <div class="row setup-content-3" id="step-9">
                <div class="col-md-12">
                    <h3 class="font-bold pl-0 my-4"><strong>Personal Data</strong></h3>
                    <div class="form-group md-form">
                        <label for="yourName-3" data-error="wrong" data-success="right">First Name</label>
                        <input id="yourName-3" type="text" required="required" class="form-control validate">
                    </div>
                    <div class="form-group md-form mt-3">
                        <label for="secondName-3" data-error="wrong" data-success="right">Second Name</label>
                        <input id="secondName-3" type="text" required="required" class="form-control validate">
                    </div>
                    <div class="form-group md-form mt-3">
                        <label for="yourAddress-3" data-error="wrong" data-success="right">Address</label>
                        <textarea id="yourAddress-3" type="text" required="required" class="md-textarea validate"></textarea>
                    </div>
                    <button class="btn btn-mdb-color btn-rounded prevBtn-3 float-left" type="button">Previous</button>
                    <button class="btn btn-mdb-color btn-rounded nextBtn-3 float-right" type="button">Next</button>
                </div>
            </div>
            <div class="row setup-content-3" id="step-10">
                <div class="col-md-12">
                    <h3 class="font-bold pl-0 my-4"><strong>Terms and conditions</strong></h3>
                    <div class="form-group">
                        <input type="checkbox" id="checkbox115">
                        <label for="checkbox115">I agree to the terms and conditions</label>
                    </div>
                    <div class="form-group">
                        <input type="checkbox" id="checkbox114">
                        <label for="checkbox114">I want to receive newsletter</label>
                    </div>
                    <button class="btn btn-mdb-color btn-rounded prevBtn-3 float-left" type="button">Previous</button>
                    <button class="btn btn-mdb-color btn-rounded nextBtn-3 float-right" type="button">Next</button>
                </div>
            </div>
            <div class="row setup-content-3" id="step-11">
                <div class="col-md-12">
                    <h3 class="font-bold pl-0 my-4"><strong>Finish</strong></h3>
                    <h2 class="text-center font-bold my-4">Registration completed!</h2>
                    <button class="btn btn-mdb-color btn-rounded prevBtn-3 float-left" type="button">Previous</button>
                    <button class="btn btn-success btn-rounded float-right" type="submit">Submit</button>
                </div>
            </div>
        </form>

    </div>
    <!-- Grid column -->

</div>
<!-- Grid row -->
                
            

Steps within form MDB Pro component

Steps form example

1

Step 1

2

Step 2

3

Step 3

Step 1

Step 2

Step 3

                
.steps-form {
  display: table;
  width: 100%;
  position: relative; }
  .steps-form .steps-row {
    display: table-row; }
    .steps-form .steps-row:before {
      top: 14px;
      bottom: 0;
      position: absolute;
      content: " ";
      width: 100%;
      height: 1px;
      background-color: #ccc; }
    .steps-form .steps-row .steps-step {
      display: table-cell;
      text-align: center;
      position: relative; }
      .steps-form .steps-row .steps-step p {
        margin-top: 0.5rem; }
      .steps-form .steps-row .steps-step button[disabled] {
        opacity: 1 !important;
        filter: alpha(opacity=100) !important; }
      .steps-form .steps-row .steps-step .btn-circle {
        width: 30px;
        height: 30px;
        text-align: center;
        padding: 6px 0;
        font-size: 12px;
        line-height: 1.428571429;
        border-radius: 15px;
        margin-top: 0; }
                
            
                
$(document).ready(function () {
    var navListItems = $('div.setup-panel div a'),
        allWells = $('.setup-content'),
        allNextBtn = $('.nextBtn'),
        allPrevBtn = $('.prevBtn');

    allWells.hide();

    navListItems.click(function (e) {
        e.preventDefault();
        var $target = $($(this).attr('href')),
            $item = $(this);

        if (!$item.hasClass('disabled')) {
            navListItems.removeClass('btn-indigo').addClass('btn-default');
            $item.addClass('btn-indigo');
            allWells.hide();
            $target.show();
            $target.find('input:eq(0)').focus();
        }
    });
  
    allPrevBtn.click(function(){
        var curStep = $(this).closest(".setup-content"),
            curStepBtn = curStep.attr("id"),
            prevStepSteps = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a");

            prevStepSteps.removeAttr('disabled').trigger('click');
    });

    allNextBtn.click(function(){
        var curStep = $(this).closest(".setup-content"),
            curStepBtn = curStep.attr("id"),
            nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
            curInputs = curStep.find("input[type='text'],input[type='url']"),
            isValid = true;

        $(".form-group").removeClass("has-error");
        for(var i=0; i< curInputs.length; i++){
            if (!curInputs[i].validity.valid){
                isValid = false;
                $(curInputs[i]).closest(".form-group").addClass("has-error");
            }
        }

        if (isValid)
            nextStepWizard.removeAttr('disabled').trigger('click');
    });

    $('div.setup-panel div a.btn-indigo').trigger('click');
});
                
            
                
<!-- Steps form -->
<div class="card">
    <div class="card-body mb-4">

        <h2 class="text-center font-bold pt-4 pb-5"><strong>Steps form example</strong></h2>
        
        <div class="steps-form">
            <div class="steps-row setup-panel">
                <div class="steps-step">
                    <a href="#step-1" type="button" class="btn btn-indigo btn-circle">1</a>
                    <p>Step 1</p>
                </div>
                <div class="steps-step">
                    <a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a>
                    <p>Step 2</p>
                </div>
                <div class="steps-step">
                    <a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a>
                    <p>Step 3</p>
                </div>
            </div>
        </div>

        <form role="form" action="" method="post">
            <div class="row setup-content" id="step-1">
                <div class="col-md-12">
                    <h3 class="font-bold pl-0 my-4"><strong>Step 1</strong></h3>
                    <div class="form-group md-form">
                        <label for="yourName" data-error="wrong" data-success="right">First Name</label>
                        <input id="yourName" type="text" required="required" class="form-control validate">
                    </div>
                    <div class="form-group md-form mt-3">
                        <label for="yourLastName" data-error="wrong" data-success="right">Last Name</label>
                        <input id="yourLastName" type="text" required="required" class="form-control validate">
                    </div>
                    <div class="form-group md-form mt-3">
                        <label for="yourAddress" data-error="wrong" data-success="right">Address</label>
                        <textarea id="yourAddress" type="text" required="required" class="md-textarea validate"></textarea>
                    </div>
                    <button class="btn btn-indigo btn-rounded nextBtn float-right" type="button">Next</button>
                </div>
            </div>
            <div class="row setup-content" id="step-2">
                <div class="col-md-12">
                    <h3 class="font-bold pl-0 my-4"><strong>Step 2</strong></h3>
                    <div class="form-group md-form">
                        <label for="companyName" data-error="wrong" data-success="right">Company Name</label>
                        <input id="companyName" type="text" required="required" class="form-control validate">
                    </div>
                    <div class="form-group md-form mt-3">
                        <label for="companyAddress" data-error="wrong" data-success="right">Company Address</label>
                        <input id="companyAddress" type="text" required="required" class="form-control validate">
                    </div>
                    <button class="btn btn-indigo btn-rounded prevBtn float-left" type="button">Previous</button>
                    <button class="btn btn-indigo btn-rounded nextBtn float-right" type="button">Next</button>
                </div>
            </div>
            <div class="row setup-content" id="step-3">
                <div class="col-md-12">
                    <h3 class="font-bold pl-0 my-4"><strong>Step 3</strong></h3>
                    <button class="btn btn-indigo btn-rounded prevBtn float-left" type="button">Previous</button>
                    <button class="btn btn-default btn-rounded float-right" type="submit">Submit</button>
                </div>
            </div>
        </form>

    </div>
</div>
<!-- Steps form -->
                
            

Horizontal steppers MDB Pro component

                
<!-- 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="fa fa-warning"></i></span>
                    <span class="label">Third step</span>
                </a>
            </li>

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

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

Vertical steppers MDB Pro component

  • 1 First step
  • 2 Second step

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse cupiditate voluptate facere iusto quaerat vitae excepturi, accusantium ut aliquam repellat atque nesciunt nostrum similique. Inventore nostrum ut, nobis porro sapiente.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore error excepturi veniam nemo repellendus, distinctio soluta vitae at sit saepe. Optio eaque quia excepturi adipisci pariatur totam, atque odit fugiat.

    Deserunt voluptatem illum quae nisi soluta eum perferendis nesciunt asperiores tempore saepe reiciendis, vero quod a dolor corporis natus qui magni quas fuga rem excepturi laboriosam. Quisquam expedita ab fugiat.

  • Third step
  • 4 Fourth step
                
<!-- Vertical Steppers -->
<div class="row mt-1">
    <div class="col-md-12">

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

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

                <!--Section Title -->
                <a href="#!">
                    <span class="circle">2</span>
                    <span class="label">Second step</span>
                </a>

                <!-- Section Description -->
                <div class="step-content grey lighten-3">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse cupiditate voluptate facere iusto quaerat vitae excepturi, accusantium ut aliquam repellat atque nesciunt nostrum similique. Inventore nostrum ut, nobis porro sapiente.</p>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore error excepturi veniam nemo repellendus, distinctio soluta vitae at sit saepe. Optio eaque quia excepturi adipisci pariatur totam, atque odit fugiat.</p>
                    <p>Deserunt voluptatem illum quae nisi soluta eum perferendis nesciunt asperiores tempore saepe reiciendis, vero quod a dolor corporis natus qui magni quas fuga rem excepturi laboriosam. Quisquam expedita ab fugiat.</p>
                </div>
            </li>

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

            <!-- Fourth Step -->
            <li>
                <a href="#!">
                    <span class="circle">4</span>
                    <span class="label">Fourth step</span>
                </a>
            </li>

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

    </div>
</div>

<!-- Steppers Navigation -->
<div class="row mt-1">
    <div class="col-md-12 text-right">
        <button class="btn-flat waves-effect">Cancel</button>
        <button class="btn btn-primary">Next</button>
    </div>
</div>
<!-- /.Vertical Steppers -->