Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Bootstrap steps / stepper

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


Horizontal Steppers

                
<!-- Horizontal Steppers -->
<div class="row">
    <div class="col-md-12">

        <!-- Stepers Wrapper -->
        <ul class="stepper stepper-horizontal">

            <!-- 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">
                <a href="#!">
                    <span class="circle">2</span>
                    <span class="label">Second step</span>
                </a>
            </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>

        </ul>
        <!-- /.Stepers Wrapper -->

    </div>
</div>
<!-- /.Horizontal Steppers -->
                
            

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
                        
<!-- 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 class="btn-flat waves-effect">Cancel</button>
        <button class="btn btn-primary">Next</button>
    </div>
</div>
<!-- /.Vertical Steppers -->