1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Stepper examples for MDB Pro

Boyce pro asked 6 years ago

I'm trying to use the steppers at https://mdbootstrap.com/components/bootstrap-steps-stepper/ as a starting point, but I can't seem to get a similar style. The example HTML for the steppers gives me https://imgur.com/a/kw6uPxw , which doesn't seem to include the styles where the line connecting all the icons like in https://imgur.com/a/Q4PAYd6 . The _stepper.scss file also doesn't seem to include the classes I see when inspecting the stepper examples on the mdbootstrap.com site. Are the source for these examples available somewhere else? Thanks much,

-Chris

 

 

Piotr Glejzer staff commented 6 years ago

Hi, may you show me your code? Because I already used our steppers code in latest pro package and everything look exactly the same as at our website. I only found a little bug. In 'Registration form with steps' you have to change code HTML in 'second step' from id='step-5' to step-2. Best, Piotr edit. I fixed that bug on our website.

Boyce pro commented 6 years ago

Sorry, meant to comment but posted below. Please see my response there.

Piotr Glejzer staff answered 6 years ago

Hi,

this is my working HTML can you check?

 

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 <meta http-equiv="x-ua-compatible" content="ie=edge">
 <title>Material Design Bootstrap</title>
 <!-- Font Awesome -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 <!-- Bootstrap core CSS -->
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <!-- Material Design Bootstrap -->
 <link href="../../css/mdb.min.css" rel="stylesheet">
 <!-- Your custom styles (optional) -->
 <link href="../../css/style.css" rel="stylesheet">
 <style>
 .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;
 }

 </style>
</head>

<body class="fixed-sn white-skin">

 <h2 class="text-center font-bold pt-4 pb-5 mb-5">
 <strong>Registration form with steps</strong>
 </h2>

 <!-- Stepper -->
 <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-1" 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-2" 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-3" 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-4" 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>

 <!-- First Step -->
 <form role="form" action="" method="post">
 <div class="row setup-content-2" id="step-1">
 <div class="col-md-12">
 <h3 class="font-weight-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>

 <!-- Second Step -->
 <div class="row setup-content-2" id="step-2">
 <div class="col-md-12">
 <h3 class="font-weight-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" rows="2" class="md-textarea validate form-control"></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>

 <!-- Third Step -->
 <div class="row setup-content-2" id="step-3">
 <div class="col-md-12">
 <h3 class="font-weight-bold pl-0 my-4">
 <strong>Terms and conditions</strong>
 </h3>
 <div class="form-check">
 <input type="checkbox" id="checkbox111" class="form-check-input">
 <label for="checkbox111" class="form-check-label">I agree to the terms and conditions</label>
 </div>
 <div class="form-check">
 <input type="checkbox" id="checkbox112" class="form-check-input">
 <label for="checkbox112" class="form-check-label">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>

 <!-- Fourth Step -->
 <div class="row setup-content-2" id="step-4">
 <div class="col-md-12">
 <h3 class="font-weight-bold pl-0 my-4">
 <strong>Finish</strong>
 </h3>
 <h2 class="text-center font-weight-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>
 <!--Footer-->
 <footer class="page-footer pt-0 mt-5">

 <!--Copyright-->
 <div class="footer-copyright py-3 text-center">
 <div class="container-fluid">
 © 2018 Copyright:
 <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>

 </div>
 </div>
 <!--/.Copyright-->

 </footer>
 <!--/.Footer-->

 <!-- SCRIPTS -->
 <!-- JQuery -->
 <script type="text/javascript" src="../../js/jquery-3.3.1.min.js"></script>
 <!-- Bootstrap tooltips -->
 <script type="text/javascript" src="../../js/popper.min.js"></script>
 <!-- Bootstrap core JavaScript -->
 <script type="text/javascript" src="../../js/bootstrap.min.js"></script>
 <!-- MDB core JavaScript -->
 <script type="text/javascript" src="../../js/mdb.min.js"></script>
 <script>
 // // SideNav Initialization
 // $(".button-collapse").sideNav();

 // var container = document.querySelector('.custom-scrollbar');
 // Ps.initialize(container, {
 // wheelSpeed: 2,
 // wheelPropagation: true,
 // minScrollbarLength: 20
 // });
 // 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');
 });

 </script>
</body>

</html>

You forgot to use css and js to stepper like here Stepper html/css/js

Boyce pro answered 6 years ago

Hi Piotr, Thanks for the quick reply! Here is the code I'm using. It's based on the stepper.html component from the admin pack, with the example code from the https://mdbootstrap.com/components/bootstrap-steps-stepper/.  This code renders as seen at https://imgur.com/a/si31EXr.   


<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Material Design Bootstrap</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="../../css/bootstrap.min.css">
<!-- Material Design Bootstrap -->
<link rel="stylesheet" href="../../css/mdb.min.css">

<!-- Your custom styles (optional) -->
<style>

</style>
</head>

<body class="fixed-sn white-skin">


<!--Main layout-->
<main>
<div class="container-fluid">
<h2 class="text-center font-bold pt-4 pb-5 mb-5"><strong>Registration form with steps</strong></h2>

<!-- Stepper -->
<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-1" 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-2" 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-3" 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-4" 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>

<!-- First Step -->
<form role="form" action="" method="post">
<div class="row setup-content-2" id="step-1">
<div class="col-md-12">
<h3 class="font-weight-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>

<!-- Second Step -->
<div class="row setup-content-2" id="step-5">
<div class="col-md-12">
<h3 class="font-weight-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" rows="2" class="md-textarea validate form-control"></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>

<!-- Third Step -->
<div class="row setup-content-2" id="step-3">
<div class="col-md-12">
<h3 class="font-weight-bold pl-0 my-4"><strong>Terms and conditions</strong></h3>
<div class="form-check">
<input type="checkbox" id="checkbox111" class="form-check-input">
<label for="checkbox111" class="form-check-label">I agree to the terms and conditions</label>
</div>
<div class="form-check">
<input type="checkbox" id="checkbox112" class="form-check-input">
<label for="checkbox112" class="form-check-label">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>

<!-- Fourth Step -->
<div class="row setup-content-2" id="step-4">
<div class="col-md-12">
<h3 class="font-weight-bold pl-0 my-4"><strong>Finish</strong></h3>
<h2 class="text-center font-weight-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>
</div>
</main>
<!--Main layout-->

<!--Footer-->
<footer class="page-footer pt-0 mt-5">

<!--Copyright-->
<div class="footer-copyright py-3 text-center">
<div class="container-fluid">
© 2018 Copyright: <a href="https://mdbootstrap.com/bootstrap-tutorial/" target="_blank"> MDBootstrap.com </a>

</div>
</div>
<!--/.Copyright-->

</footer>
<!--/.Footer-->

<!-- SCRIPTS -->
<!-- JQuery -->
<script src="../../js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="../../js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="../../js/bootstrap.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="../../js/mdb.min.js"></script>
<!--Custom scripts-->
<script>
// SideNav Initialization
$(".button-collapse").sideNav();

var container = document.querySelector('.custom-scrollbar');
Ps.initialize(container, {
wheelSpeed: 2,
wheelPropagation: true,
minScrollbarLength: 20
});
</script>
</body>

</html>

                    
                      

                    
                    
                    

                      
                      
                      
                        
                        

                          
                            
                          
                        

                      
                    

                    
                  

                  
                

                
              
            
            
              
              

                
                

                  

  
  
  
  


                

                
                
                

                  
Write

                  
                     Create snippet
                  
                

                

                
                

                  

                    
                    

                      
                      
                      

                      

                        Please insert min. 20 characters.
                      

                      

                        
                          
                        
                      

                    

                  

                

                
              

              
            
          

          
          
          


            

  
  

    

      
FREE CONSULTATION

      
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

    

  

  





  

    

      
      
      
      
      
    

  

  
  

  




            
            

              
              
Status

              

              
              

                

                  

                    
                    Answered
                  

                  
                

                
              

            

            

            
            
            

              
              
Specification of the issue

              

              

                
    
                  
  • 
                    ForumUser:
                    
                      Pro
                    
                  
    • 
                  
  • 
                    Premium support:
                    
                      No
                    
                  
    • 
                  
  • 
                    Technology:
                    
                      MDB jQuery
                    
                  
    • 
                  
  • 
                    MDB Version:
                    
                      -
                    
                  
    • 
                  
  • 
                    Device:
                    
                      -
                    
                  
    • 
                  
  • 
                    Browser:
                    
                      -
                    
                  
    • 
                  
  • 
                    OS:
                    
                      -
                    
                  
    • 
                  
  • 
                    Provided sample code:
                    
                      No
                    
                  
    • 
                  
  • 
                    Provided link:
                    
                      No
                    
                  
    • 
                

              

              

              
              
                
                

                  
                  
Tags

                  

                  
                  

                    
                  

                

                
              

              
              
                
                

                  
                  
About author

                  

                  
                  

                    
                  

                  

                    
                    

                      
                        Boyce
                      
                    

                    
                    
                    Pro User
                    
                    

                    
                    
                      7Support score
                    
                    

                    
                      1Questions
                    
                    
                      1Answers
                    

                    
                    
                      0Snippets