Stepper

Some features in this component requires CDBootstrap Pro package.Clickhereto try it out.

Bootstrap 5 Stepper

Bootstrap 5 Stepper is a component that shows content in the form of a process with user milestones. The steps that follow are separated and linked by buttons.

This is an excellent solution for a variety of registration forms in which you don't want to overwhelm the user with too many fields and queries.

The Contrast Bootstrap 5 Stepper can be positioned both vertically and horizontally. Bootstrap steppers are useful in many ways.

Examples of instances Bootstrap 5 stepper can be used include:

Registration form
Payment gateway
Tutorial with steps

See the following Bootstrap 5 Stepper examples:

Add Script

We add dynamicity and interactivity to our stepper with JavaScript, we use querySelector to select an element. We then create a new stepper object using the new keyword from CDB, passing it the element we just targeted as an argument.

Each stepper instance can be created with the following javascript code snippet. This gives you access to the event handlers and listeners available for the stepper.

html

<script>
   const stepperElement = document.querySelector("#stepper");
    const stepper = new CDB.Stepper(stepperElement);
</script>

Horizontal Stepper

This is the basic stepper component with an horizontally arranged content.

html

<div height="800px" class="stepper" id="stepper">
  <div class="steps-container">
    <div class="steps">
      <div class="step" icon="fa fa-pencil-alt" id="1">
        <div class="step-title">
          <span class="step-number">01</span>
          <div class="step-text">Basic Information</div>
        </div>
      </div>
      <div class="step" icon="fa fa-info-circle" id="2">
        <div class="step-title">
          <span class="step-number">02</span>
          <div class="step-text">Personal Data</div>
        </div>
      </div>
      <div class="step" icon="fa fa-book-reader" id="3">
        <div class="step-title">
          <span class="step-number">03</span>
          <div class="step-text">Terms and Conditions</div>
        </div>
      </div>
      <div class="step" icon="fa fa-check" id="4">
        <div class="step-title">
          <span class="step-number">04</span>
          <div class="step-text">Finish</div>
        </div>
      </div>
    </div>
  </div>
  <div class="stepper-content-container">
    <div class="stepper-content fade-in" stepper-label="1">
      <div class="w-100 h-100" style="padding: 30px 10px; background: #f9f9f9">
        <div
          class="my-0 mx-auto"
          style="max-width: 500px; border-radius: 10px; background: #f5f5f5"
        >
          <div class="p-10 d-flex flex-column justify-content-center align-items-center">
            <div class="text-center pt-20 pe-0 pb-10 ps-0 fw-bold">
              Step 1
            </div>
            <div class="p-10 d-flex flex-column justify-content-center align-items-center w-100">
              <label class="text-muted mb-2"> Username </label>
              <div class="cdb-form">
                <input type="text" class="form-control bg-light" />
              </div>
              <label class="text-muted mb-2"> Email </label>
              <div class="cdb-form">
                <input type="text" class="form-control bg-light" />
              </div>
              <label class="text-muted mb-2"> Password </label>
              <div class="cdb-form">
                <input type="password" class="form-control bg-light" />
              </div>
              <label class="text-muted mb-2"> Confirm Password </label>
              <div class="cdb-form">
                <input type="password" class="form-control bg-light" />
              </div>
              <div class="d-flex w-100 align-items-center justify-content-between">
                <button
                  class="btn btn-dark btn-block mb-3 mt-5 ms-auto"
                  onclick="stepper.navigate('2')"
                >
                  Next
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="stepper-content fade-in" stepper-label="2">
      <div class="w-100 h-100" style="padding: 30px 10px; background: #f9f9f9">
        <div
          class="my-0 mx-auto"
          style="max-width: 500px; border-radius: 10px; background: #f5f5f5"
        >
          <div class="p-10 d-flex flex-column justify-content-center align-items-center">
            <div class="text-center pt-20 pe-0 pb-10 ps-0 fw-bold">
              Step 2
            </div>
            <div class="p-10 d-flex flex-column justify-content-center align-items-center w-100">
              <label class="text-muted mb-2"> First Name </label>
              <div class="cdb-form">
                <input type="text" class="form-control bg-light" />
              </div>
              <label class="text-muted mb-2"> Last Name </label>
              <div class="cdb-form">
                <input type="email" class="form-control bg-light" />
              </div>
              <label class="text-muted mb-2"> Phone Number </label>
              <div class="cdb-form">
                <input type="text" class="form-control bg-light" />
              </div>
              <label class="text-muted mb-2"> Address </label>
              <div class="cdb-form">
                <input type="email" class="form-control bg-light" />
              </div>
              <label class="text-muted mb-2"> Country </label>
              <div class="cdb-form">
                <input type="text" class="form-control bg-light" />
              </div>

              <div class="d-flex w-100 align-items-center justify-content-between">
                <button class="btn btn-dark btn-block mb-3 mt-5" onclick="stepper.navigate('1')">
                  Previous
                </button>
                <button class="btn btn-dark btn-block mb-3 mt-5" onclick="stepper.navigate('3')">
                  Next
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="stepper-content fade-in" stepper-label="3">
      <div class="w-100 h-100" style="padding: 30px 10px; background: #f9f9f9">
        <div
          class="my-0 mx-auto"
          style="max-width: 500px; border-radius: 10px; background: #f5f5f5"
        >
          <div class="p-10 d-flex flex-column justify-content-center align-items-center">
            <div class="text-center pt-20 pe-0 pb-10 ps-0 fw-bold">
              Step 3
            </div>
            <div class="p-10 d-flex flex-column justify-content-center align-items-center w-100">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae
                vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda
                officia quibusdam deleniti eos cupiditate dolore doloribus!
              </p>
              <p>
                Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore
                recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque
                quos facere sequi unde optio aliquam!
              </p>
              <p>
                Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore
                recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque
                quos facere sequi unde optio aliquam!
              </p>
              <p>
                Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore
                recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque
                quos facere sequi unde optio aliquam!
              </p>
            </div>
            <div class="d-flex w-100 align-items-center justify-content-between">
              <button class="btn btn-dark btn-block mb-3 mt-5" onclick="stepper.navigate('2')">
                Previous
              </button>
              <button class="btn btn-dark btn-block mb-3 mt-5" onclick="stepper.navigate('4')">
                Next
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="stepper-content fade-in" stepper-label="4">
      <div class="w-100 h-100" style="padding: 30px 10px; background: #f9f9f9">
        <div
          class="my-0 mx-auto"
          style="max-width: 500px; border-radius: 10px; background: #f5f5f5"
        >
          <div class="p-10 d-flex flex-column justify-content-center align-items-center">
            <div class="text-center pt-20 pe-0 pb-10 ps-0 fw-bold">
              Step 4
            </div>
            <div class="p-10 d-flex flex-column justify-content-center align-items-center w-100">
              <div class="text-center">
                Congratulations! You have completed this process.
                <span role="img" aria-label="image"> 🎉 </span>
              </div>
            </div>
            <div class="d-flex w-100 align-items-center justify-content-between">
              <button class="btn btn-dark btn-block mb-3 mt-5" onclick="stepper.navigate('3')">
                Previous
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Vertical Stepper

Pro Component

Set the direction attribute of the stepper HTML elment to vertical to arrange its content vertically.

html

<div direction="vertical" height="800px" class="stepper" id="stepper">
  <div class="steps-container">
    <div class="steps">
      <div class="step" icon="fa fa-pencil-alt" id="1">
        <div class="step-title">
          <span class="step-number">01</span>
          <div class="step-text">Basic Information</div>
        </div>
      </div>
      <div class="step" icon="fa fa-info-circle" id="2">
        <div class="step-title">
          <span class="step-number">02</span>
          <div class="step-text">Personal Data</div>
        </div>
      </div>
      <div class="step" icon="fa fa-book-reader" id="3">
        <div class="step-title">
          <span class="step-number">03</span>
          <div class="step-text">Terms and Conditions</div>
        </div>
      </div>
      <div class="step" icon="fa fa-check" id="4">
        <div class="step-title">
          <span class="step-number">04</span>
          <div class="step-text">Finish</div>
        </div>
      </div>
    </div>
  </div>
  <div class="stepper-content-container">
    <div class="stepper-content fade-in" stepper-label="1">
      <div class="w-100 h-100" style="padding: 30px 10px; background: #f9f9f9">
        <div
          class="my-0 mx-auto"
          style="max-width: 500px; border-radius: 10px; background: #f5f5f5"
        >
          <div class="p-10 d-flex flex-column justify-content-center align-items-center">
            <div
              class="text-center pt-20 pe-0 pb-10 ps-0 fw-bold"
              style="font-size: 30px; color: #939393"
            >
              Step 1
            </div>
            <div class="p-10 d-flex flex-column justify-content-center align-items-center w-100">
              <label class="text-muted mb-2"> Username </label>
              <div class="cdb-form">
                <input type="text" class="form-control bg-light" />
              </div>
              <label class="text-muted mb-2"> Email </label>
              <div class="cdb-form">
                <input type="text" class="form-control bg-light" />
              </div>
              <label class="text-muted mb-2"> Password </label>
              <div class="cdb-form">
                <input type="password" class="form-control bg-light" />
              </div>
              <label class="text-muted mb-2"> Confirm Password </label>
              <div class="cdb-form">
                <input type="password" class="form-control bg-light" />
              </div>
              <div class="d-flex w-100 align-items-center justify-content-between">
                <button
                  class="btn btn-dark btn-block mb-3 mt-5 ms-auto"
                  onclick="stepper.navigate('2')"
                >
                  Next
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="stepper-content fade-in" stepper-label="2">
      <div class="w-100 h-100" style="padding: 30px 10px; background: #f9f9f9">
        <div
          class="my-0 mx-auto"
          style="max-width: 500px; border-radius: 10px; background: #f5f5f5"
        >
          <div class="p-10 d-flex flex-column justify-content-center align-items-center">
            <div
              class="text-center pt-20 pe-0 pb-10 ps-0 fw-bold"
              style="font-size: 30px; color: #939393"
            >
              Step 2
            </div>
            <div class="p-10 d-flex flex-column justify-content-center align-items-center w-100">
              <label class="text-muted mb-2"> First Name </label>
              <div class="cdb-form">
                <input type="text" class="form-control bg-light" />
              </div>
              <label class="text-muted mb-2"> Last Name </label>
              <div class="cdb-form">
                <input type="email" class="form-control bg-light" />
              </div>
              <label class="text-muted mb-2"> Phone Number </label>
              <div class="cdb-form">
                <input type="text" class="form-control bg-light" />
              </div>
              <label class="text-muted mb-2"> Address </label>
              <div class="cdb-form">
                <input type="email" class="form-control bg-light" />
              </div>
              <label class="text-muted mb-2"> Country </label>
              <div class="cdb-form">
                <input type="text" class="form-control bg-light" />
              </div>

              <div class="d-flex w-100 align-items-center justify-content-between">
                <button class="btn btn-dark btn-block mb-3 mt-5" onclick="stepper.navigate('1')">
                  Previous
                </button>
                <button class="btn btn-dark btn-block mb-3 mt-5" onclick="stepper.navigate('3')">
                  Next
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="stepper-content fade-in" stepper-label="3">
      <div class="w-100 h-100" style="padding: 30px 10px; background: #f9f9f9">
        <div
          class="my-0 mx-auto"
          style="max-width: 500px; border-radius: 10px; background: #f5f5f5"
        >
          <div class="p-10 d-flex flex-column justify-content-center align-items-center">
            <div
              class="text-center pt-20 pe-0 pb-10 ps-0 fw-bold"
              style="font-size: 30px; color: #939393"
            >
              Step 3
            </div>
            <div class="p-10 d-flex flex-column justify-content-center align-items-center w-100">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae
                vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda
                officia quibusdam deleniti eos cupiditate dolore doloribus!
              </p>
              <p>
                Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore
                recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque
                quos facere sequi unde optio aliquam!
              </p>
              <p>
                Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore
                recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque
                quos facere sequi unde optio aliquam!
              </p>
              <p>
                Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore
                recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque
                quos facere sequi unde optio aliquam!
              </p>
            </div>
            <div class="d-flex w-100 align-items-center justify-content-between">
              <button class="btn btn-dark btn-block mb-3 mt-5" onclick="stepper.navigate('2')">
                Previous
              </button>
              <button class="btn btn-dark btn-block mb-3 mt-5" onclick="stepper.navigate('4')">
                Next
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="stepper-content fade-in" stepper-label="4">
      <div class="w-100 h-100" style="padding: 30px 10px; background: #f9f9f9">
        <div
          class="my-0 mx-auto"
          style="max-width: 500px; border-radius: 10px; background: #f5f5f5"
        >
          <div class="p-10 d-flex flex-column justify-content-center align-items-center">
            <div
              class="text-center pt-20 pe-0 pb-10 ps-0 fw-bold"
              style="font-size: 30px; color: #939393"
            >
              Step 4
            </div>
            <div class="p-10 d-flex flex-column justify-content-center align-items-center w-100">
              <div class="text-center" style="font-size: 25px; text-align: center">
                Congratulations! You have completed this process.
                <span style="font-size: 50px; display: block" role="img" aria-label="image">
                  🎉
                </span>
              </div>
              <div class="d-flex w-100 align-items-center justify-content-between">
                <button class="btn btn-dark btn-block mb-3 mt-5" onclick="stepper.navigate('3')">
                  Previous
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Stepper Without Icons and Headers

Pro Component

html

<div height="800px" class="stepper" id="stepper">
  <div class="steps-container">
    <div class="steps">
      <div class="step" icon="fa fa-pencil-alt" id="1"></div>
      <div class="step" icon="fa fa-pencil-alt" id="2"></div>
      <div class="step" icon="fa fa-pencil-alt" id="3"></div>
      <div class="step" icon="fa fa-pencil-alt" id="4"></div>
    </div>
  </div>
  <div class="stepper-content-container">
    <div class="stepper-content fade-in" stepper-label="1">
      <div class="w-100 h-100" style="padding: 30px 10px; background: #f9f9f9">
        <div
          class="my-0 mx-auto"
          style="max-width: 500px; border-radius: 10px; background: #f5f5f5"
        >
          <div class="p-10 d-flex flex-column justify-content-center align-items-center">
            <div
              class="text-center pt-20 pe-0 pb-10 ps-0 fw-bold"
              style="font-size: 30px; color: #939393"
            >
              Step 1
            </div>
            <div class="p-10 d-flex flex-column justify-content-center align-items-center w-100">
              <label class="text-muted mb-2"> Username </label>
              <div class="cdb-form">
                <input type="text" class="form-control bg-light" />
              </div>
              <label class="text-muted mb-2"> Email </label>
              <div class="cdb-form">
                <input type="text" class="form-control bg-light" />
              </div>
              <label class="text-muted mb-2"> Password </label>
              <div class="cdb-form">
                <input type="password" class="form-control bg-light" />
              </div>
              <label class="text-muted mb-2"> Confirm Password </label>
              <div class="cdb-form">
                <input type="password" class="form-control bg-light" />
              </div>
              <div class="d-flex w-100 align-items-center justify-content-between">
                <button
                  class="btn btn-dark btn-block mb-3 mt-5 ms-auto"
                  onclick="stepper.navigate('2')"
                >
                  Next
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="stepper-content fade-in" stepper-label="2">
      <div class="w-100 h-100" style="padding: 30px 10px; background: #f9f9f9">
        <div
          class="my-0 mx-auto"
          style="max-width: 500px; border-radius: 10px; background: #f5f5f5"
        >
          <div class="p-10 d-flex flex-column justify-content-center align-items-center">
            <div
              class="text-center pt-20 pe-0 pb-10 ps-0 fw-bold"
              style="font-size: 30px; color: #939393"
            >
              Step 2
            </div>
            <div class="p-10 d-flex flex-column justify-content-center align-items-center w-100">
              <label class="text-muted mb-2"> First Name </label>
              <div class="cdb-form">
                <input type="text" class="form-control bg-light" />
              </div>
              <label class="text-muted mb-2"> Last Name </label>
              <div class="cdb-form">
                <input type="email" class="form-control bg-light" />
              </div>
              <label class="text-muted mb-2"> Phone Number </label>
              <div class="cdb-form">
                <input type="text" class="form-control bg-light" />
              </div>
              <label class="text-muted mb-2"> Address </label>
              <div class="cdb-form">
                <input type="email" class="form-control bg-light" />
              </div>
              <label class="text-muted mb-2"> Country </label>
              <div class="cdb-form">
                <input type="text" class="form-control bg-light" />
              </div>

              <div class="d-flex w-100 align-items-center justify-content-between">
                <button class="btn btn-dark btn-block mb-3 mt-5" onclick="stepper.navigate('1')">
                  Previous
                </button>
                <button class="btn btn-dark btn-block mb-3 mt-5" onclick="stepper.navigate('3')">
                  Next
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="stepper-content fade-in" stepper-label="3">
      <div class="w-100 h-100" style="padding: 30px 10px; background: #f9f9f9">
        <div
          class="my-0 mx-auto"
          style="max-width: 500px; border-radius: 10px; background: #f5f5f5"
        >
          <div class="p-10 d-flex flex-column justify-content-center align-items-center">
            <div
              class="text-center pt-20 pe-0 pb-10 ps-0 fw-bold"
              style="font-size: 30px; color: #939393"
            >
              Step 3
            </div>
            <div class="p-10 d-flex flex-column justify-content-center align-items-center w-100">
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae
                vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda
                officia quibusdam deleniti eos cupiditate dolore doloribus!
              </p>
              <p>
                Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore
                recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque
                quos facere sequi unde optio aliquam!
              </p>
              <p>
                Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore
                recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque
                quos facere sequi unde optio aliquam!
              </p>
              <p>
                Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore
                recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque
                quos facere sequi unde optio aliquam!
              </p>
            </div>
            <div class="d-flex w-100 align-items-center justify-content-between">
              <button class="btn btn-dark btn-block mb-3 mt-5" onclick="stepper.navigate('2')">
                Previous
              </button>
              <button class="btn btn-dark btn-block mb-3 mt-5" onclick="stepper.navigate('4')">
                Next
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="stepper-content fade-in" stepper-label="4">
      <div class="w-100 h-100" style="padding: 30px 10px; background: #f9f9f9">
        <div
          class="my-0 mx-auto"
          style="max-width: 500px; border-radius: 10px; background: #f5f5f5"
        >
          <div class="p-10 d-flex flex-column justify-content-center align-items-center">
            <div
              class="text-center pt-20 pe-0 pb-10 ps-0 fw-bold"
              style="font-size: 30px; color: #939393"
            >
              Step 4
            </div>
            <div class="p-10 d-flex flex-column justify-content-center align-items-center w-100">
              <div class="text-center" style="font-size: '25px'; text-align: 'center'">
                Congratulations! You have completed this process.
                <span style="font-size: '50px'; display: 'block'" role="img" aria-label="image">
                  🎉
                </span>
              </div>
              <div class="d-flex w-100 align-items-center justify-content-between">
                <button class="btn btn-dark btn-block mb-3 mt-5" onclick="stepper.navigate('3')">
                  Previous
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Classes and Events Reference: Contrast Bootstrap Stepper

This section will build on your information about the classes and events that makes Contrast Bootstrap stepper tick. You will find out what they do, their default values, and how you would use them in your code.

The table below lists css classes options for Contrast Bootstrap Stepper

Name	Description
`stepper`	Wrapper styles for stepper
`step-container`	Defines styles for the container of the stepper content
`steps`	Defines styles for steps list
`step`	Defines styles for each steps
`stepper-content-container`	Defines styles for the stepper content container
`stepper-content`	Defines styles for each stepper content

Attributes Reference: Contrast Bootstrap Stepper

These are attributes that control styles and properties of the stepper

Name	Description	Example
height	Defines maximum height of stepper	`<div class="stepper" height='800px'>`
icon	Defines icon for each step	`<div class="step" icon='fa-check'>`
id	Defines id for each step	`<div class="step" id='5'>`
stepper-label	Links stepper content item to step	`<div class="stepper-content" stepper-label='5'>`

Events Reference: Contrast Bootstrap Stepper

These are events you can call on the Contrast Bootstrap Stepper instance

Name	Description	Example
navigate	This functions receives an id and navigates to the item on the stepper that has that id.	`stepper.navigate(1)`

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

Pagination

Sidebar