🤩
Windframe Import update is finally here!

Stepper

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 stepper are useful in some many ways.

Examples of places Bootstrap 5 stepper can be used include:

  • Registration form
  • Payment gateway
  • Tutorial with steps

See the following Bootstrap 5 stepper examples:

Basic Vertical Stepper

01
Basic Information
Basic Information
02
Personal Data
Personal Data
03
Terms and Conditions
Terms and Conditions
04
Finish
Finish
html
<div direction="vertical" height="800px" class="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 class="step" icon="fa fa-pencil-alt" id="5">
<div class="step-title">
<span class="step-number">05</span>
<div class="step-text">More</div>
</div>
</div>
</div>
</div>
<div class="stepper-content-container">
<div class="stepper-content fade-in" stepper-label="1">
<div>Step 1</div>
</div>
<div class="stepper-content fade-in" stepper-label="2">
<div>Step 2</div>
</div>
<div class="stepper-content fade-in" stepper-label="3">
<div>Step 3</div>
</div>
<div class="stepper-content fade-in" stepper-label="4">
<div>Step 4</div>
</div>
</div>
</div>

Horizontal Stepper

01
Basic Information
Basic Information
02
Personal Data
Personal Data
03
Terms and Conditions
Terms and Conditions
04
Finish
Finish
html
<div height="800px" class="stepper" id="stepper2">
<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>Step 1</div>
</div>
<div class="stepper-content fade-in" stepper-label="2">
<div>Step 2</div>
</div>
<div class="stepper-content fade-in" stepper-label="3">
<div>Step 3</div>
</div>
<div class="stepper-content fade-in" stepper-label="4">
<div>Step 4</div>
</div>
</div>
</div>

Stepper Without Icons and Headers

01
02
03
04
html
<div height="800px" class="stepper" id="stepper2">
<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>Step 1</div>
</div>
<div class="stepper-content fade-in" stepper-label="2">
<div>Step 2</div>
</div>
<div class="stepper-content fade-in" stepper-label="3">
<div>Step 3</div>
</div>
<div class="stepper-content fade-in" stepper-label="4">
<div>Step 4</div>
</div>
</div>
</div>

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 src="/build/constrast-bootstrap-pro/js/cdb.js"></script>
<script>
const stepper = document.querySelector('#stepper');
new CDB.Stepper(stepper);
</script>

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

NameDescription
stepperWrapper styles for stepper
step-containerDefines styles for the container of the stepper content
stepsDefines styles for steps list
stepDefines styles for each steps
stepper-content-containerDefines styles for the stepper content container
stepper-contentDefines styles for each stepper content

Attributes Reference: Contrast Bootstrap Stepper

These are attributes that control styles and properties of the stepper

NameDescriptionExample
heightDefines maximum height of stepper<div class="stepper" height='800px'>
iconDefines icon for each step<div class="step" icon='fa-check'>
idDefines id for each step<div class="step" id='5'>
stepper-labelLinks 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

NameDescriptionExample
navigateThis functions receives an id and navigates to the item on the stepper that has that id.const stepper = document.querySelector('.stepper') stepper.navigate(1)

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help 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 UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast