postImage

Bootstrap 5 stepper-How to create a beautiful Bootstrap 5 stepper

blogImage

By Emmanuel Chinonso

Web Developer

What is a React Bootstrap Stepper?

A React Bootstrap 5 Stepper is a component that displays content as a process defined by user milestones. The following steps are separated and connected by buttons.

This is an excellent solution for various registration forms, where you don't want to scare the user with loads of fields and questions. We can use the stepper to ease the entire registration process one data input at a time.

Bootstrap 5 Stepper can be aligned vertically as well as horizontally.

Examples of React Bootstrap steps use:

  • Registration form
  • Payment gateway
  • Tutorial with steps

We will look at how to create this Bootstrap 5 Stepper today using a react library known as Contrast.

Contrast, also known as CDBReact, is a react library which is an Elegant UI kit with full bootstrap 5 support that has reusable components for building mobile-first, responsive websites and web apps.

To use Bootstrap 5 Stepper, you need to download the pro version here.

How to create a React Bootstrap 5 stepper component.

The Stepper would be built using React, Bootstrap, and CDBReact. You don’t need to have any previous knowledge of CDBReact,

Prerequisites

  • Basic React Knowledge
  • JavaScript knowledge
  • Basic Bootstrap knowledge
  • NPM installed

Setup

First, you check if you have a node installed. To do this, run the following command in your terminal.

Code:

jsx
node - v;

This should show you the current version of the node you have installed on your machine. If you don’t have a node installed, download it here. Installing node also installs npm on your PC, to confirm this, run this command npm-v in your terminal. Now that we have the node installed, we can start our React project by going to the directory of our choice and running.

Code:

cmd
npx create-react-app stepper-app

I named the project Stepper-app, but you can use any name of your choice.

Installing CDBReact-pro

Before we install our CDBReact we have to download the pro version here first. Then, we can go ahead to install them in our project. It is advised to add the file to the root of the project by running:

cmd
npm install --save ./path-to-the-cdbreact-pro-tgz-file

Or using Yarn

cmd
yarn add ./path-to-the-cdbreact-pro-tgz-file

Note that we don’t need to install bootstrap or add it anywhere in our project, as CDBReact does that for us upon installation.

Stepper

We can now create a file named stepper.js. This is where we are going to import the Stepper and other components. This is also where we will be writing our code. The Contrast stepper component must first be imported before using it.

Code:

jsx
import React, { useState } from 'react';
import { CDBStepper, CDBStep, CDBInput, CDBBtn, CDBContainer } from 'cdbreact-pro';

In the code, we imported some imported components we need to build a stepper. They include

  • CDBStepper: The CDBStepper component holds the steps.
  • CDBStep: The CDBStep component is nested in the stepper, they indicate the various stages of progression.
  • CDBInput: The CDBInput component is used to collect info or data from the user.
  • CDBBtn: The CDBBtn component is used by the user to submit info or interact with the web pages.
  • CDBContainer: The CDBContainer is used to group, or put other components in a box ( container ).

To learn more about the Contrast React Bootstrap Stepper check out the docs here.

Code:

jsx
const Stepper = () => {
const [active, setActive] = useState(1);
const handleNextPrevClick = a => {
setActive(a);
};
const handleSubmission = () => {
alert('Form submitted!');
};
return (
<CDBContainer className="d-flex">
<CDBContainer style={{ height: '500px', width: '150px' }}>
<CDBStepper direction="vertical">
<CDBStep
id={1}
far
icon="folder-open"
name="Basic Information"
handleClick={() => handleNextPrevClick(1)}
active={active}
/>
<CDBStep
id={2}
icon="pencil-alt"
name="Personal Data"
handleClick={() => handleNextPrevClick(2)}
active={active}
/>
<CDBStep
id={3}
icon="dragon"
name="Terms and Conditions"
handleClick={() => handleNextPrevClick(3)}
active={active}
/>
<CDBStep
id={4}
icon="check"
name="Finish"
handleClick={() => handleNextPrevClick(4)}
active={active}
/>
</CDBStepper>
</CDBContainer>
<CDBContainer
style={{
height: '500px',
width: '100%',
display: 'flex',
alignItems: 'center',
}}
>
{active === 1 && (
<CDBContainer md="12">
<h3
className="font-weight-bold pl-0 my-4 "
style={{
width: '100%',
fontSize: '30px',
textAlign: 'center',
}}
>
Your Information
</h3>
<CDBInput label="Email" className="mt-4" />
<CDBInput label="username" className="mt-4" />
<CDBInput label="Password" className="mt-4" />
<CDBInput label="Repeat Password" className="mt-4" />
<CDBBtn
color="dark"
block
flat
className="float-right"
onClick={() => handleNextPrevClick(2)}
>
Next
</CDBBtn>
</CDBContainer>
)}
{active === 2 && (
<CDBContainer md="12">
<h3
className="font-weight-bold pl-0 my-4"
style={{
width: '100%',
fontSize: '30px',
textAlign: 'center',
}}
>
Personal Data
</h3>
<CDBInput label="First Name" className="mt-3" />
<CDBInput label="Second Name" className="mt-3" />
<CDBInput label="Surname" className="mt-3" />
<CDBInput label="Address" type="textarea" rows="2" />
<CDBBtn
color="light"
flat
className="float-left"
onClick={() => handleNextPrevClick(1)}
>
Previous
</CDBBtn>
<CDBBtn
color="dark"
flat
className="float-right"
onClick={() => handleNextPrevClick(3)}
>
Next
</CDBBtn>
</CDBContainer>
)}
{active === 3 && (
<CDBContainer md="12">
<h3
className="font-weight-bold pl-0 my-4"
style={{
width: '100%',
fontSize: '30px',
textAlign: 'center',
}}
>
Terms and conditions
</h3>
<CDBInput label="I agree to the terms and conditions" type="checkbox" id="checkbox3" />
<CDBInput label="I want to receive newsletter" type="checkbox" id="checkbox4" />
<CDBBtn
color="light"
className="float-left"
flat
onClick={() => handleNextPrevClick(2)}
>
Previous
</CDBBtn>
<CDBBtn
color="dark"
className="float-right"
flat
onClick={() => handleNextPrevClick(4)}
>
Next
</CDBBtn>
</CDBContainer>
)}
{active === 4 && (
<CDBContainer md="12">
<h3
className="font-weight-bold pl-0 my-4"
style={{
width: '100%',
fontSize: '30px',
textAlign: 'center',
}}
>
Finish
</h3>
<h2 className="text-center font-weight-bold my-4">Registration completed!</h2>
<CDBBtn
color="light"
flat
className="float-left"
onClick={() => handleNextPrevClick(3)}
>
Previous
</CDBBtn>
<CDBBtn color="success" flat className="float-right" onClick={handleSubmission}>
Submit
</CDBBtn>
</CDBContainer>
)}
</CDBContainer>
</CDBContainer>
);
};
export default Stepper;

The CDBStep Component

The Contrast React Bootstrap Stepper Component above takes in the following properties to customize our Stepper component.

  • id is a step's key, we use this to differentiate one step from the other.
  • icon this property is used to indicate what icon we want in our step.
  • name this property is used to title the steps ( sections of the stepper ).
  • handleClick is a callback prop that calls the function passed into it when a user clicks on the stepper.
  • Active

The CDBInput Component

  • label takes a string which is the label to the data input field.
  • type tells the Contrast Input Component what type of data input field you want to use in your project.
  • id is an input key, we use this to differentiate one input field from the other.

The CDBBtn Component

  • The color property is used to define the background color of the buttons
  • The classname
  • The flat property is used to indicate that we want the button to have no button shadows.
  • The onClick is a callback property that runs the function passed to it when a user clicks on the button.

In the above code, we added styling to the components via the predefined styling we get from the React Bootstrap library, Contrast using its classNames, and for the native HTML elements like the h3 element, we use inline styling.

Finally, we import the Stepper Component we just created in our App Component in our app.js file to see our stepper in the browser.

Code

jsx
import './App.css';
import Stepper from './stepper';
function App() {
return (
<Router>
<div className="App">
<Stepper />
</div>
</Router>
);
}
export default App;

Conclusion

Building a Bootstrap 5 stepper using contrast is quite simple and allows you to use several tools, including bootstrap styling, without installing bootstrap 5 to create your stepper.

You can also check out some other features you can use with the CDBReact Stepper Docs.

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.

ad-banner

Related Posts

Comments

...