Progress bar with steps

Bootstrap 5 Progress bar with steps component

Responsive Progress bar with steps built with Bootstrap 5. This is a great solution for a variety of registration forms without lots of fields and questions.


Basic example

3 steps to get a progress bar with steps:

  1. initialize the stepper component using data-mdb-stepper-init
  2. use the nextStep and previousStep methods to go to the next or previous step
  3. set data-mdb-stepper-linear="true" to use basic validation before proceeding to the next step and mark a step as optional by adding data-mdb-stepper-optional="true" to it

.
  • 1 step1
    invalid
    invalid
  • 2 step2
    invalid
    invalid
    invalid
    invalid
  • 3 step3
        
            
            <div>
              <!-- Steps -->
              <ul class="stepper" id="stepper-form-example" data-mdb-stepper-linear="true">
                <form class="needs-validation stepper-form">
                  <!-- First step -->
                  <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">
                      <div data-mdb-input-init class="form-outline mb-4">
                        <input type="text" id="stepper-form-first-name" class="form-control" required/>
                        <label class="form-label" for="stepper-form-first-name">First name<small class="text-muted">(required)</small></label>
                        <div class="invalid-feedback">invalid</div>
                      </div>

                      <div data-mdb-input-init class="form-outline mb-4">
                        <input type="text" id="stepper-form-last-name" class="form-control" required/>
                        <label class="form-label" for="stepper-form-last-name">Last name<small class="text-muted">(required)</small></label>
                        <div class="invalid-feedback">invalid</div>
                      </div>

                      <div data-mdb-input-init class="form-outline mb-4">
                        <input type="text" id="stepper-form-last-name" class="form-control" />
                        <label class="form-label" for="stepper-form-last-name">Nickname<small class="text-muted">(optional)</small></label>
                      </div>
                    </div>
                  </li>
                  <!-- First step -->

                  <!-- Second step -->
                  <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">
                      <div data-mdb-input-init class="form-outline mb-4">
                        <input type="text" id="form6Example3" class="form-control" required />
                        <label class="form-label" for="form6Example3">Company name<small class="text-muted">(required)</small></label>
                        <div class="invalid-feedback">invalid</div>
                      </div>

                      <div data-mdb-input-init class="form-outline mb-4">
                        <input type="text" id="form6Example4" class="form-control" required />
                        <label class="form-label" for="form6Example4">Address<small class="text-muted">(required)</small></label>
                        <div class="invalid-feedback">invalid</div>
                      </div>

                      <div data-mdb-input-init class="form-outline mb-4">
                        <input type="email" id="form6Example5" class="form-control" required />
                        <label class="form-label" for="form6Example5">Email<small class="text-muted">(required)</small></label>
                        <div class="invalid-feedback">invalid</div>
                      </div>

                      <div data-mdb-input-init class="form-outline mb-4">
                        <input type="number" id="form6Example6" class="form-control" />
                        <label class="form-label" for="form6Example6">Phone<small class="text-muted">(optional)</small></label>
                        <div class="invalid-feedback">invalid</div>
                      </div>
                    </div>
                  </li>
                  <!-- Second step -->

                  <!-- Third step -->
                  <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">
                      <div data-mdb-input-init class="form-outline mb-4">
                        <textarea class="form-control" id="form6Example7" rows="4"></textarea>
                        <label class="form-label" for="form6Example7">Additional information</label>
                      </div>

                      <div class="form-check d-flex justify-content-center mb-4">
                        <input class="form-check-input me-2" type="checkbox" value="" id="form6Example8" checked/>
                        <label class="form-check-label" for="form6Example8">Create an account?</label>
                      </div>

                      <button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-success btn-block mb-4">Place order</button>
                    </div>
                  </li>
                  <!-- Third step -->
                </form>
              </ul>
              <!-- Steps -->

              <!-- Buttons -->
              <div class="d-flex justify-content-center px-3">
                <button data-mdb-button-init id="form-example-prev-step" data-mdb-ripple-init class="btn btn-primary w-100 me-2">Previous step</button>
                <button data-mdb-button-init id="form-example-next-step" data-mdb-ripple-init class="btn btn-primary w-100">Next step</button>
              </div>
              <!-- Buttons -->
            </div>
          
        
    
        
            
            const stepper = new mdb.Stepper(document.getElementById('stepper-form-example'));

            document.getElementById('form-example-next-step').addEventListener('click', () => {
              stepper.nextStep();
            });

            document.getElementById('form-example-prev-step').addEventListener('click', () => {
              stepper.previousStep();
            });