Rate this docs

Angular Bootstrap Steppers

Angular Steps (stepper) - Bootstrap 4 & Material Design

Angular 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:


Basic horizontal steppers


          <div class="card">
              <div class="card-body">
            
                <!-- Horizontal Steppers -->
                <div class="row">
                  <div class="col-md-12">
            
                    <!-- Stepers Wrapper -->
                    <ul class="stepper stepper-horizontal">
            
                      <!-- First Step -->
                      <li class="completed" mdbWavesEffect>
                        <a>
                          <span class="circle">1</span>
                          <span class="label">First step</span>
                        </a>
                      </li>
            
                      <!-- Second Step -->
                      <li class="active" mdbWavesEffect>
                        <a>
                          <span class="circle">2</span>
                          <span class="label">Second step</span>
                        </a>
                      </li>
            
                      <!-- Third Step -->
                      <li class="warning" mdbWavesEffect>
                        <a>
                          <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 -->
            
              </div>
            </div>
      

Basic vertical steppers

  • 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


          <div class="card m-3">
              <div class="card-body">
                <!-- Vertical Steppers -->
                <div class="row mt-1">
                  <div class="col-md-12">
            
                    <!-- Stepers Wrapper -->
                    <ul class="stepper stepper-vertical">
            
                      <!-- First Step -->
                      <li class="completed" mdbWavesEffect>
                        <a>
                          <span class="circle">1</span>
                          <span class="label">First step</span>
                        </a>
                      </li>
            
                      <!-- Second Step -->
                      <li class="active" mdbWavesEffect>
            
                        <!--Section Title -->
                        <a>
                          <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" mdbWavesEffect>
                        <a>
                          <span class="circle"><i class="fa fa-warning"></i></span>
                          <span class="label">Third step</span>
                        </a>
                      </li>
            
                      <!-- Fourth Step -->
                      <li mdbWavesEffect>
                        <a>
                          <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 btn-flat btn-sm">Cancel</button>
                    <button class="btn btn-primary btn-sm">Next</button>
                  </div>
                </div>
                <!-- /.Vertical Steppers -->
              </div>
            </div>

      

Angular Steppers - API

In this section you will find informations about required modules and available inputs of stepper component.


Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.

// MDB Angular Pro
import { WavesModule } from 'ng-uikit-pro-standard'
// MDB Angular Free
import { WavesModule } from 'angular-bootstrap-md'