Bootstrap Vue Steps (stepper)

Bootstrap Vue 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 Vue steps use:

  • Registration form
  • Payment gateway
  • Tutorial with steps

See the following Bootstrap Vue stepper examples:


Registration form with steps MDB Pro component

The step indicator is generated by the component, basing on the name and icon props passed in with individual steps. Additionally, the stepper accepts following props:

  • buttons - Boolean - controls whether to generate navigational buttons below;
  • vertical - Boolean - whether the generated stepper should be oriented vertically;
  • within - Boolean - decides if the generated stepper should be in it's smaller, less dominant form;
  • simpleH / simpleV - Boolean - turns stepper into a purely representational component open for custom logic. Last character decides its orientation;
  • nextBtn - String - what should be written on the navigational button turning panes forward. Default value: "next"; the generated stepper should be oriented vertically;
  • prevBtn - String - what should be written on the navigational button turning panes bachwards. Default value: "previous";
  • submitBtn - String - what should be written on the button at the last pane. Default value: "submit";
  • submitFunction - Function - the callbach for form submission;

To have it work properly, one must pass slot="content" attrubute to the steps , so our content lays where it is supposed to within the stepper.

Registration form

Basic Information

Personal Data

Terms and conditions

Finish

Registration completed!

<stepper buttons>
  <step name="Basic Information"
        icon="folder-open-o"
        slot="content">
    <h3 class="font-weight-bold pl-0 my-4"><strong>Basic Information</strong></h3>
    <md-input label="Email"/>
    <md-input label="Username"/>
    <md-input label="Password"/>
    <md-input label="Repeat Password"/>
  </step>

  <step name="Personal Data"
        icon="pencil"
        slot="content">
    <h3 class="font-weight-bold pl-0 my-4"><strong>Personal Data</strong></h3>
    <md-input label="First Name"/>
    <md-input label="Second Name"/>
    <md-input label="Surname"/>
    <md-textarea label="Address"/>
  </step>

  <step name="Terms and Conditions"
        icon="photo"
        slot="content">
    <h3 class="font-weight-bold pl-0 my-4"><strong>Terms and conditions</strong></h3>
    <md-input type="checkbox" id="checkbox1" label="I agree to the terms and conditions" />
    <md-input type="checkbox" id="checkbox2" label="I want to receive newsletter" />
  </step>
  <step name="Finish"
        icon="check"
        slot="content">
    <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>
  </step>
</stepper>

Vertical registration form steps MDB Pro component

Basic Information

Personal Data

Terms and conditions

Finish

Registration completed!


<stepper vertical buttons>
  <step name="Basic Information"
        icon="folder-open-o"
        slot="content">
    <h3 class="font-weight-bold pl-0 my-4"><strong>Basic Information</strong></h3>
    <md-input label="Email"/>
    <md-input label="Username"/>
    <md-input label="Password"/>
    <md-input label="Repeat Password"/>
  </step>

  <step name="Personal Data"
        icon="pencil"
        slot="content">
    <h3 class="font-weight-bold pl-0 my-4"><strong>Personal Data</strong></h3>
    <md-input label="First Name"/>
    <md-input label="Second Name"/>
    <md-input label="Surname"/>
    <md-textarea label="Address"/>
  </step>

  <step name="Terms and Conditions"
        icon="heart-o"
        slot="content">
    <h3 class="font-weight-bold pl-0 my-4"><strong>Terms and conditions</strong></h3>
    <MdInput type="checkbox" id="checkbox1" label="I agree to the terms and conditions" />
    <MdInput type="checkbox" id="checkbox2" label="I want to receive newsletter" />
  </step>

  <step name="Finish"
        icon="check"
        slot="content">
    <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>
  </step>
</stepper>

Steps within form MDB Pro component

Steps form example

1

Step 1

2

Step 2

3

Step 3

Step 1

Step 2

Step 3


<card>
  <card-body>
    <h2 class="text-center font-weight-bold pt-4 pb-5"><strong>Steps form example</strong></h2>
    <stepper within buttons>
      <step name="Step 1" slot="content">
        <h3 class="font-weight-bold pl-0 my-4"><strong>Step 1</strong></h3>
        <md-input label="First Name"/>
        <md-input label="Second Name"/>
        <md-textarea label="Address"/>
      </step>

      <step name="Step 2" slot="content">
        <h3 class="font-weight-bold pl-0 my-4"><strong>Step 2</strong></h3>
        <md-input label="Company Name"/>
        <md-input label="Company Addresws"/>
        <md-textarea label="Address"/>
      </step>

      <step name="Step 3" slot="content">
        <h3 class="font-weight-bold pl-0 my-4"><strong>Step 3</strong></h3>
      </step>
    </stepper>
  </card-body>
</card>

Horizontal steppers MDB Pro component

This form of the stepper is a simple ul-based wrapper, open for custom interactions to be designed. Below is a suggested take on the implementation.


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

Vertical steppers MDB Pro component

  • 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

<stepper simpleV>
  <li class="completed" slot="simple">
    <a>
      <span class="circle">1</span>
      <span class="label">First step</span>
    </a>
  </li>
  <li class="active" slot="simple">
    <a>
      <span class="circle">2</span>
      <span class="label">Second step</span>
    </a>
      <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>
  <li class="warning" slot="simple">
    <a>
      <span class="circle"><i class="fa fa-warning"></i></span>
      <span class="label">Third step</span>
    </a>
  </li>
  <li slot="simple">
    <a>
      <span class="circle">4</span>
      <span class="label">Fourth step</span>
    </a>
  </li>
</stepper>