Steppers

Steppers display progress through a sequence by breaking it up into multiple logical and numbered steps.

Horizontal Steppers MDB Pro component

<div class="row">
    <div class="col-md-12">

        <ul class="stepper stepper-horizontal">
            <li class="completed">
                <a href="#!">
                    <span class="circle">1</span>
                    <span class="label">First step</span>
                </a>
            </li>
            <li class="active">
                <a href="#!">
                    <span class="circle">2</span>
                    <span class="label">Second step</span>
                </a>
            </li>
            <li class="warning">
                <a href="#!">
                    <span class="circle"><i class="fa fa-warning"></i></span>
                    <span class="label">Third step</span>
                </a>
            </li>
        </ul>

    </div>
</div>
        

Vertical Steppers MDB Pro component

<!-- Vertical Steppers -->
<div class="row m-t-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 m-t-1">
    <div class="col-md-12 text-right">
        <button mdbBtn flat="true"  mdbWavesEffect>Cancel</button>
        <button mdbBtn color="primary" class="waves-light" mdbWavesEffect>Next</button>
    </div>
</div>
<!-- /.Vertical Steppers -->
        

API Reference:

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.

API Reference for MDB Angular Steppers:

// For MDB Angular Pro
import { WavesModule, ButtonsModule } from 'ng-uikit-pro-standard'