Bootstrap 3 - Stepper

In this example below you will see how to do a Bootstrap 3 - Stepper with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by shantikumarsingh, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright shantikumarsingh ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Bootstrap 3 - Stepper</title>
  
  
  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
  <div class="panel panel-default">
    <div class="panel-body">

      <div class="stepper">
        <ul class="nav nav-tabs nav-justified" role="tablist">
          <li role="presentation" class="active">
            <a class="persistant-disabled" href="#stepper-step-1" data-toggle="tab" aria-controls="stepper-step-1" role="tab" title="Step 1">
              <span class="round-tab">1</span>
            </a>
          </li>
          <li role="presentation" class="disabled">
            <a class="persistant-disabled" href="#stepper-step-2" data-toggle="tab" aria-controls="stepper-step-2" role="tab" title="Step 2">
              <span class="round-tab">2</span>
            </a>
          </li>
          <li role="presentation" class="disabled">
            <a class="persistant-disabled" href="#stepper-step-3" data-toggle="tab" aria-controls="stepper-step-3" role="tab" title="Step 3">
              <span class="round-tab">3</span>
            </a>
          </li>
          <li role="presentation" class="disabled">
            <a class="persistant-disabled" href="#stepper-step-4" data-toggle="tab" aria-controls="stepper-step-4" role="tab" title="Complete">
              <span class="round-tab">4</span>
            </a>
          </li>
        </ul>
        <form role="form">
          <div class="tab-content">
            <div class="tab-pane fade in active" role="tabpanel" id="stepper-step-1">
              <h3 class "h2">1. Select Payment Type</h3>
              <p>This is step 1</p>
              <ul class="list-inline pull-right">
                <li>
                  <a class="btn btn-primary next-step">Next</a>
                </li>
              </ul>
            </div>
            <div class="tab-pane fade" role="tabpanel" id="stepper-step-2">
              <h3 class "h2">2. Enter Payment Information</h3>
              <p>This is step 2</p>
              <ul class="list-inline pull-right">
                <li>
                  <a class="btn btn-default prev-step">Back</a>
                </li>
                <li>
                  <a class="btn btn-primary next-step">Next</a>
                </li>
              </ul>
            </div>
            <div class="tab-pane fade" role="tabpanel" id="stepper-step-3">
              <h3 class="hs">3. Review and Submit Payment</h3>
              <p>This is step 3</p>
              <ul class="list-inline pull-right">
                <li>
                  <a class="btn btn-default prev-step">Back</a>
                </li>
                <li>
                  <a class="btn btn-default cancel-stepper">Cancel Payment</a>
                </li>
                <li>
                  <a class="btn btn-primary next-step">Submit Payment</a>
                </li>
              </ul>
            </div>
            <div class="tab-pane fade" role="tabpanel" id="stepper-step-4">
              <h3>4. All done!</h3>
              <p>You have successfully completed all steps.</p>
            </div>
          </div>
        </form>
      </div>


    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/shantikumarsingh/bootstrap-3-stepper-OOgGzG */
.stepper .nav-tabs {
  position: relative;
}
.stepper .nav-tabs > li {
  position: relative;
}
.stepper .nav-tabs > li:after {
  content: '';
  position: absolute;
  background: #f1f1f1;
  display: block;
  width: 100%;
  height: 5px;
  top: 30px;
  left: 50%;
  z-index: 1;
}
.stepper .nav-tabs > li.completed::after {
  background: #34bc9b;
}
.stepper .nav-tabs > li:last-child::after {
  background: transparent;
}
.stepper .nav-tabs > li.active:last-child .round-tab {
  background: #34bc9b;
}
.stepper .nav-tabs > li.active:last-child .round-tab::after {
  content: '✔';
  color: #fff;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 0;
  display: block;
}
.stepper .nav-tabs [data-toggle='tab'] {
  width: 25px;
  height: 25px;
  margin: 20px auto;
  border-radius: 100%;
  border: none;
  padding: 0;
  color: #f1f1f1;
}
.stepper .nav-tabs [data-toggle='tab']:hover {
  background: transparent;
  border: none;
}
.stepper .nav-tabs > .active > [data-toggle='tab'], .stepper .nav-tabs > .active > [data-toggle='tab']:hover, .stepper .nav-tabs > .active > [data-toggle='tab']:focus {
  color: #34bc9b;
  cursor: default;
  border: none;
}
.stepper .tab-pane {
  position: relative;
  padding-top: 50px;
}
.stepper .round-tab {
  width: 25px;
  height: 25px;
  line-height: 22px;
  display: inline-block;
  border-radius: 25px;
  background: #fff;
  border: 2px solid #34bc9b;
  color: #34bc9b;
  z-index: 2;
  position: absolute;
  left: 0;
  text-align: center;
  font-size: 14px;
}
.stepper .completed .round-tab {
  background: #34bc9b;
}
.stepper .completed .round-tab::after {
  content: '✔';
  color: #fff;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 0;
  display: block;
}
.stepper .active .round-tab {
  background: #fff;
  border: 2px solid #34bc9b;
}
.stepper .active .round-tab:hover {
  background: #fff;
  border: 2px solid #34bc9b;
}
.stepper .active .round-tab::after {
  display: none;
}
.stepper .disabled .round-tab {
  background: #fff;
  color: #f1f1f1;
  border-color: #f1f1f1;
}
.stepper .disabled .round-tab:hover {
  color: #4dd3b6;
  border: 2px solid #a6dfd3;
}
.stepper .disabled .round-tab::after {
  display: none;
}

/*Downloaded from https://www.codeseek.co/shantikumarsingh/bootstrap-3-stepper-OOgGzG */
/*jslint browser: true*/
/*global $, jQuery, alert*/
(function($) {
    'use strict';

    $(function() {

        $(document).ready(function() {
            function triggerClick(elem) {
                $(elem).click();
            }
            var $progressWizard = $('.stepper'),
                $tab_active,
                $tab_prev,
                $tab_next,
                $btn_prev = $progressWizard.find('.prev-step'),
                $btn_next = $progressWizard.find('.next-step'),
                $tab_toggle = $progressWizard.find('[data-toggle="tab"]'),
                $tooltips = $progressWizard.find('[data-toggle="tab"][title]');

            // To do:
            // Disable User select drop-down after first step.
            // Add support for payment type switching.

            //Initialize tooltips
            $tooltips.tooltip();

            //Wizard
            $tab_toggle.on('show.bs.tab', function(e) {
                var $target = $(e.target);

                if (!$target.parent().hasClass('active, disabled')) {
                    $target.parent().prev().addClass('completed');
                }
                if ($target.parent().hasClass('disabled')) {
                    return false;
                }
            });

            // $tab_toggle.on('click', function(event) {
            //     event.preventDefault();
            //     event.stopPropagation();
            //     return false;
            // });

            $btn_next.on('click', function() {
                $tab_active = $progressWizard.find('.active');

                $tab_active.next().removeClass('disabled');

                $tab_next = $tab_active.next().find('a[data-toggle="tab"]');
                triggerClick($tab_next);

            });
            $btn_prev.click(function() {
                $tab_active = $progressWizard.find('.active');
                $tab_prev = $tab_active.prev().find('a[data-toggle="tab"]');
                triggerClick($tab_prev);
            });
        });
    });

}(jQuery, this));

Comments