Search...
graphql
react

Stepper

React Bootstrap 5 Stepper

React Bootstrap 5 Stepper is a component that shows content in the form of a process with user-defined milestones. Buttons divide and connect the stages that follow.

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

The stepper can be positioned both vertically and horizontally.

Examples of React Bootstrap 5 steps use:

  • Registration form
  • Payment gateway
  • Tutorial with steps

Importing the Contrast React Bootstrap 5 Stepper and Step Component

Import CDBStepper into your project to use the React Bootstrap 5 Stepper component. After that, you import CDBStep. The component CDBStep is nested within the component CDBStepper. They represent the many steps of the process.

js
import { CDBStepper, CDBStep } from "cdbreact";

Horizontal Stepper

Basic Information
Personal Data
Terms and Conditions
Finish
js
import React, { useState } from "react";
import styled from '@emotion/styled'
import { CDBStepper, CDBStep, CDBInput, CDBBtn, CDBContainer } from "cdbreact";




const Stepper = () => {
  const [active, setActive] = useState(1);


  const handleNextPrevClick = a => setActive(a);
  return (
      <CDBStepper>
        <CDBStep
          id={1}
          icon="pencil-alt"
          name="Basic Information"
          handleClick={() => handleNextPrevClick(1)}
          active={active}
          component={<Step1 handleNextPrevClick={handleNextPrevClick} />}
        />
        <CDBStep
          id={2}
          icon="info-circle"
          name="Personal Data"
          handleClick={() => handleNextPrevClick(2)}
          active={active}
          component={<Step2 handleNextPrevClick={handleNextPrevClick} />}
        />
        <CDBStep
          id={3}
          icon="book-reader"
          name="Terms and Conditions"
          handleClick={() => handleNextPrevClick(3)}
          active={active}
          component={<Step3 handleNextPrevClick={handleNextPrevClick} />}
        />
        <CDBStep
          id={4}
          icon="check"
          name="Finish"
          handleClick={() => handleNextPrevClick(4)}
          active={active}
          component={<Step4 handleNextPrevClick={handleNextPrevClick} />}
        />
      </CDBStepper>
  );
};


export default Stepper;


const Step4 = ({ handleNextPrevClick }) => {
  return (
    <StepContainer md="12">
      <div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
        <div
          style={{
            margin: '0 auto',
            maxWidth: '500px',
            borderRadius: '10px',
            background: '#f5f5f5',
            boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
          }}
        >
          <FlexColumnContainer>
            <div
              style={{
                textAlign: 'center',
                padding: '20px 0 10px 0',
                color: '#939393',
                fontSize: '30px',
                fontWeight: 'bold',
              }}
            >
              Step 4
            </div>
            <FlexColumnContainer width="100%">
              <div style={{ fontSize: '25px', textAlign: 'center' }}>
                Congratulations! You have completed this process.
                <span style={{ fontSize: '50px', display: 'block' }} role="img" aria-label="image">
                  🎉
                </span>
              </div>
              <div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
                <CDBBtn
                  flat
                  outline
                  circle={false}
                  color="secondary"
                  onClick={() => handleNextPrevClick(3)}
                >
                  Previous
                </CDBBtn>
              </div>
            </FlexColumnContainer>
          </FlexColumnContainer>
        </div>
      </div>
    </StepContainer>
  );
};


const Step3 = ({ handleNextPrevClick }) => {
  return (
    <StepContainer>
      <div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
        <div
          style={{
            margin: '0 auto',
            maxWidth: '500px',
            borderRadius: '10px',
            background: '#f5f5f5',
            boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
          }}
        >
          <FlexColumnContainer>
            <div
              style={{
                textAlign: 'center',
                padding: '20px 0 10px 0',
                color: '#939393',
                fontSize: '30px',
                fontWeight: 'bold',
              }}
            >
              Step 3
            </div>
            <FlexColumnContainer width="100%">
              <div
                style={{
                  fontSize: '10px',
                  fontWeight: '200',
                  maxHeight: '300px',
                  overflowY: 'auto',
                }}
              >
                <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 style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
                <CDBBtn
                  className="float-start"
                  circle={false}
                  color="secondary"
                  flat
                  outline
                  onClick={() => handleNextPrevClick(2)}
                >
                  Previous
                </CDBBtn>
                <CDBBtn
                  className="float-end"
                  flat
                  color="secondary"
                  circle={false}
                  onClick={() => handleNextPrevClick(4)}
                >
                  Next
                </CDBBtn>
              </div>
            </FlexColumnContainer>
          </FlexColumnContainer>
        </div>
      </div>
    </StepContainer>
  );
};


const Step2 = ({ handleNextPrevClick }) => {
  return (
    <StepContainer md="12">
      <div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
        <div
          style={{
            margin: '0 auto',
            maxWidth: '500px',
            borderRadius: '10px',
            background: '#f5f5f5',
            boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
          }}
        >
          <FlexColumnContainer>
            <div
              style={{
                textAlign: 'center',
                padding: '20px 0 10px 0',
                color: '#939393',
                fontSize: '30px',
                fontWeight: 'bold',
              }}
            >
              Step 2
            </div>
            <FlexColumnContainer width="100%">
              <CDBInput color="secondary" label="FirstName" />
              <CDBInput color="secondary" label="LastName" />
              <CDBInput color="secondary" label="Surname" />
              <CDBInput color="secondary" label="Address" />
              <CDBInput color="secondary" label="Country" />
              <div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
                <CDBBtn
                  color="secondary"
                  flat
                  className="float-start"
                  circle={false}
                  outline
                  onClick={() => handleNextPrevClick(1)}
                >
                  Previous
                </CDBBtn>
                <CDBBtn
                  color="secondary"
                  circle={false}
                  flat
                  className="float-end"
                  onClick={() => handleNextPrevClick(3)}
                >
                  Next
                </CDBBtn>
              </div>
            </FlexColumnContainer>
          </FlexColumnContainer>
        </div>
      </div>
    </StepContainer>
  );
};


const Step1 = ({ handleNextPrevClick }) => {
  return (
    <StepContainer>
      <div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
        <div
          style={{
            margin: '0 auto',
            maxWidth: '500px',
            borderRadius: '10px',
            background: '#f5f5f5',
            boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
          }}
        >
          <FlexColumnContainer>
            <div
              style={{
                textAlign: 'center',
                padding: '20px 0 10px 0',
                color: '#939393',
                fontSize: '30px',
                fontWeight: 'bold',
              }}
            >
              Step 1
            </div>
            <FlexColumnContainer width="100%">
              <CDBInput color="secondary" label="Username" />
              <CDBInput color="secondary" label="Email" />
              <CDBInput color="secondary" label="Password" />
              <CDBInput color="secondary" label="Confirm Password" />
              <div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
                <CDBBtn
                  color="secondary"
                  flat
                  circle={false}
                  className="float-end"
                  onClick={() => handleNextPrevClick(2)}
                >
                  Next
                </CDBBtn>
              </div>
            </FlexColumnContainer>
          </FlexColumnContainer>
        </div>
      </div>
    </StepContainer>
  );
};


const FlexColumnContainer = styled('div')`
  padding: 10px;
  display: flex;
  flex-direction: column;
  width: ${props => props.width};
  justify-content: ${props => (props.justifyContent ? props.justifyContent : 'center')};
  align-items: ${props => (props.alignItems ? props.alignItems : 'center')};
  box-sizing: border-box;
`;


const StepContainer = styled('div')`
  width: 100%;
  height: 100%;
`;

Vertical Stepper

Pro Component

The CDBStepper accepts a direction parameter that specifies the stepper's orientation.

Alongside our CDBStepper, we also import CDBIcon for our icons, CDBInput for the input fields, and the CDBButton for our buttons.

Each CDBStep component accepts a component props that defines the component to render when that step is active

Basic Information
Personal Data
Terms and Conditions
Finish
js
import React, { useState } from "react";
import styled from '@emotion/styled'
import { CDBStepper, CDBStep, CDBInput, CDBBtn, CDBContainer } from "cdbreact";




const Stepper = () => {
  const [active, setActive] = useState(1);


  const handleNextPrevClick = a => {
    setActive(a);
  };
  return (
      <CDBStepper direction="vertical" >
        <CDBStep
          id={1}
          icon="pencil-alt"
          name="Basic Information"
          handleClick={() => handleNextPrevClick(1)}
          active={active}
          component={<Step1 handleNextPrevClick={handleNextPrevClick} />}
        />
        <CDBStep
          id={2}
          icon="info-circle"
          name="Personal Data"
          handleClick={() => handleNextPrevClick(2)}
          active={active}
          component={<Step2 handleNextPrevClick={handleNextPrevClick} />}
        />
        <CDBStep
          id={3}
          icon="book-reader"
          name="Terms and Conditions"
          handleClick={() => handleNextPrevClick(3)}
          active={active}
          component={<Step3 handleNextPrevClick={handleNextPrevClick} />}
        />
        <CDBStep
          id={4}
          icon="check"
          name="Finish"
          handleClick={() => handleNextPrevClick(4)}
          active={active}
          component={<Step4 handleNextPrevClick={handleNextPrevClick} />}
        />
      </CDBStepper>
  );
};


export default Stepper;


const Step4 = ({ handleNextPrevClick }) => {
  return (
    <StepContainer md="12">
      <div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
        <div
          style={{
            margin: '0 auto',
            maxWidth: '500px',
            borderRadius: '10px',
            background: '#f5f5f5',
            boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
          }}
        >
          <FlexColumnContainer>
            <div
              style={{
                textAlign: 'center',
                padding: '20px 0 10px 0',
                color: '#939393',
                fontSize: '30px',
                fontWeight: 'bold',
              }}
            >
              Step 4
            </div>
            <FlexColumnContainer width="100%">
              <div style={{ fontSize: '25px', textAlign: 'center' }}>
                Congratulations! You have completed this process.
                <span style={{ fontSize: '50px', display: 'block' }} role="img" aria-label="image">
                  🎉
                </span>
              </div>
              <div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
                <CDBBtn
                  flat
                  outline
                  circle={false}
                  color="secondary"
                  onClick={() => handleNextPrevClick(3)}
                >
                  Previous
                </CDBBtn>
              </div>
            </FlexColumnContainer>
          </FlexColumnContainer>
        </div>
      </div>
    </StepContainer>
  );
};


const Step3 = ({ handleNextPrevClick }) => {
  return (
    <StepContainer>
      <div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
        <div
          style={{
            margin: '0 auto',
            maxWidth: '500px',
            borderRadius: '10px',
            background: '#f5f5f5',
            boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
          }}
        >
          <FlexColumnContainer>
            <div
              style={{
                textAlign: 'center',
                padding: '20px 0 10px 0',
                color: '#939393',
                fontSize: '30px',
                fontWeight: 'bold',
              }}
            >
              Step 3
            </div>
            <FlexColumnContainer width="100%">
              <div
                style={{
                  fontSize: '10px',
                  fontWeight: '200',
                  maxHeight: '300px',
                  overflowY: 'auto',
                }}
              >
                <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 style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
                <CDBBtn
                  className="float-start"
                  circle={false}
                  color="secondary"
                  flat
                  outline
                  onClick={() => handleNextPrevClick(2)}
                >
                  Previous
                </CDBBtn>
                <CDBBtn
                  className="float-end"
                  flat
                  color="secondary"
                  circle={false}
                  onClick={() => handleNextPrevClick(4)}
                >
                  Next
                </CDBBtn>
              </div>
            </FlexColumnContainer>
          </FlexColumnContainer>
        </div>
      </div>
    </StepContainer>
  );
};


const Step2 = ({ handleNextPrevClick }) => {
  return (
    <StepContainer md="12">
      <div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
        <div
          style={{
            margin: '0 auto',
            maxWidth: '500px',
            borderRadius: '10px',
            background: '#f5f5f5',
            boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
          }}
        >
          <FlexColumnContainer>
            <div
              style={{
                textAlign: 'center',
                padding: '20px 0 10px 0',
                color: '#939393',
                fontSize: '30px',
                fontWeight: 'bold',
              }}
            >
              Step 2
            </div>
            <FlexColumnContainer width="100%">
              <CDBInput color="secondary" label="FirstName" />
              <CDBInput color="secondary" label="LastName" />
              <CDBInput color="secondary" label="Surname" />
              <CDBInput color="secondary" label="Address" />
              <CDBInput color="secondary" label="Country" />
              <div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
                <CDBBtn
                  color="secondary"
                  flat
                  className="float-start"
                  circle={false}
                  outline
                  onClick={() => handleNextPrevClick(1)}
                >
                  Previous
                </CDBBtn>
                <CDBBtn
                  color="secondary"
                  circle={false}
                  flat
                  className="float-end"
                  onClick={() => handleNextPrevClick(3)}
                >
                  Next
                </CDBBtn>
              </div>
            </FlexColumnContainer>
          </FlexColumnContainer>
        </div>
      </div>
    </StepContainer>
  );
};


const Step1 = ({ handleNextPrevClick }) => {
  return (
    <StepContainer>
      <div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
        <div
          style={{
            margin: '0 auto',
            maxWidth: '500px',
            borderRadius: '10px',
            background: '#f5f5f5',
            boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
          }}
        >
          <FlexColumnContainer>
            <div
              style={{
                textAlign: 'center',
                padding: '20px 0 10px 0',
                color: '#939393',
                fontSize: '30px',
                fontWeight: 'bold',
              }}
            >
              Step 1
            </div>
            <FlexColumnContainer width="100%">
              <CDBInput color="secondary" label="Username" />
              <CDBInput color="secondary" label="Email" />
              <CDBInput color="secondary" label="Password" />
              <CDBInput color="secondary" label="Confirm Password" />
              <div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
                <CDBBtn
                  color="secondary"
                  flat
                  circle={false}
                  className="float-end"
                  onClick={() => handleNextPrevClick(2)}
                >
                  Next
                </CDBBtn>
              </div>
            </FlexColumnContainer>
          </FlexColumnContainer>
        </div>
      </div>
    </StepContainer>
  );
};


const FlexColumnContainer = styled('div')`
  padding: 10px;
  display: flex;
  flex-direction: column;
  width: ${props => props.width};
  justify-content: ${props => (props.justifyContent ? props.justifyContent : 'center')};
  align-items: ${props => (props.alignItems ? props.alignItems : 'center')};
  box-sizing: border-box;
`;
const StepContainer = styled('div')`
  width: 100%;
  height: 100%;
`;

Stepper Without Icons and Headers

01
02
03
04
js
import React, { useState } from "react";
import styled from '@emotion/styled'
import { CDBStepper, CDBStep, CDBContainer } from "cdbreact";


export const Stepper = () => {


    const [active, setActive] = useState(1)


  const handleNextPrevClick = (a) => {
        setActive(a)
  };
  return (
      <CDBStepper direction="horizontal" showTitle={false} showTooltip={false}>
        <CDBStep
          id={1}
          name="Basic Information"
          handleClick={() => handleNextPrevClick(1)}
          active={active}
          component={<Step1 handleNextPrevClick={handleNextPrevClick} />}
        />
        <CDBStep
          id={2}
          name="Personal Data"
          handleClick={() => handleNextPrevClick(2)}
          active={active}
          component={<Step2 handleNextPrevClick={handleNextPrevClick} />}
        />
        <CDBStep
          id={3}
          name="Terms and Conditions"
          handleClick={() => handleNextPrevClick(3)}
          active={active}
          component={<Step3 handleNextPrevClick={handleNextPrevClick} />}
        />
        <CDBStep
          id={4}
          name="Finish"
          handleClick={() => handleNextPrevClick(4)}
          active={active}
          component={<Step4 handleNextPrevClick={handleNextPrevClick} />}
        />
      </CDBStepper>
  )
};


const Step4 = ({ handleNextPrevClick }) => {
  return (
    <StepContainer md="12">
      <div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
        <div
          style={{
            margin: '0 auto',
            maxWidth: '500px',
            borderRadius: '10px',
            background: '#f5f5f5',
            boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
          }}
        >
          <FlexColumnContainer>
            <div
              style={{
                textAlign: 'center',
                padding: '20px 0 10px 0',
                color: '#939393',
                fontSize: '30px',
                fontWeight: 'bold',
              }}
            >
              Step 4
            </div>
            <FlexColumnContainer width="100%">
              <div style={{ fontSize: '25px', textAlign: 'center' }}>
                Congratulations! You have completed this process.
                <span style={{ fontSize: '50px', display: 'block' }} role="img" aria-label="image">
                  🎉
                </span>
              </div>
              <div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
                <CDBBtn
                  flat
                  outline
                  circle={false}
                  color="secondary"
                  onClick={() => handleNextPrevClick(3)}
                >
                  Previous
                </CDBBtn>
              </div>
            </FlexColumnContainer>
          </FlexColumnContainer>
        </div>
      </div>
    </StepContainer>
  );
};


const Step3 = ({ handleNextPrevClick }) => {
  return (
    <StepContainer>
      <div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
        <div
          style={{
            margin: '0 auto',
            maxWidth: '500px',
            borderRadius: '10px',
            background: '#f5f5f5',
            boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
          }}
        >
          <FlexColumnContainer>
            <div
              style={{
                textAlign: 'center',
                padding: '20px 0 10px 0',
                color: '#939393',
                fontSize: '30px',
                fontWeight: 'bold',
              }}
            >
              Step 3
            </div>
            <FlexColumnContainer width="100%">
              <div
                style={{
                  fontSize: '10px',
                  fontWeight: '200',
                  maxHeight: '300px',
                  overflowY: 'auto',
                }}
              >
                <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 style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
                <CDBBtn
                  className="float-start"
                  circle={false}
                  color="secondary"
                  flat
                  outline
                  onClick={() => handleNextPrevClick(2)}
                >
                  Previous
                </CDBBtn>
                <CDBBtn
                  className="float-end"
                  flat
                  color="secondary"
                  circle={false}
                  onClick={() => handleNextPrevClick(4)}
                >
                  Next
                </CDBBtn>
              </div>
            </FlexColumnContainer>
          </FlexColumnContainer>
        </div>
      </div>
    </StepContainer>
  );
};


const Step2 = ({ handleNextPrevClick }) => {
  return (
    <StepContainer md="12">
      <div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
        <div
          style={{
            margin: '0 auto',
            maxWidth: '500px',
            borderRadius: '10px',
            background: '#f5f5f5',
            boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
          }}
        >
          <FlexColumnContainer>
            <div
              style={{
                textAlign: 'center',
                padding: '20px 0 10px 0',
                color: '#939393',
                fontSize: '30px',
                fontWeight: 'bold',
              }}
            >
              Step 2
            </div>
            <FlexColumnContainer width="100%">
              <CDBInput color="secondary" label="FirstName" />
              <CDBInput color="secondary" label="LastName" />
              <CDBInput color="secondary" label="Surname" />
              <CDBInput color="secondary" label="Address" />
              <CDBInput color="secondary" label="Country" />
              <div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
                <CDBBtn
                  color="secondary"
                  flat
                  className="float-start"
                  circle={false}
                  outline
                  onClick={() => handleNextPrevClick(1)}
                >
                  Previous
                </CDBBtn>
                <CDBBtn
                  color="secondary"
                  circle={false}
                  flat
                  className="float-end"
                  onClick={() => handleNextPrevClick(3)}
                >
                  Next
                </CDBBtn>
              </div>
            </FlexColumnContainer>
          </FlexColumnContainer>
        </div>
      </div>
    </StepContainer>
  );
};


const Step1 = ({ handleNextPrevClick }) => {
  return (
    <StepContainer>
      <div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
        <div
          style={{
            margin: '0 auto',
            maxWidth: '500px',
            borderRadius: '10px',
            background: '#f5f5f5',
            boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
          }}
        >
          <FlexColumnContainer>
            <div
              style={{
                textAlign: 'center',
                padding: '20px 0 10px 0',
                color: '#939393',
                fontSize: '30px',
                fontWeight: 'bold',
              }}
            >
              Step 1
            </div>
            <FlexColumnContainer width="100%">
              <CDBInput color="secondary" label="Username" />
              <CDBInput color="secondary" label="Email" />
              <CDBInput color="secondary" label="Password" />
              <CDBInput color="secondary" label="Confirm Password" />
              <div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
                <CDBBtn
                  color="secondary"
                  flat
                  circle={false}
                  className="float-end"
                  onClick={() => handleNextPrevClick(2)}
                >
                  Next
                </CDBBtn>
              </div>
            </FlexColumnContainer>
          </FlexColumnContainer>
        </div>
      </div>
    </StepContainer>
  );
};


const FlexColumnContainer = styled('div')`
  padding: 10px;
  display: flex;
  flex-direction: column;
  width: ${props => props.width};
  justify-content: ${props => (props.justifyContent ? props.justifyContent : 'center')};
  align-items: ${props => (props.alignItems ? props.alignItems : 'center')};
  box-sizing: border-box;
`;


const StepContainer = styled('div')`
  width: 100%;
  height: 100%;
`;

Step Color Styles

Pro Component

CDBSteps' background color may be changed to meet your expectations for design. There are a number of properties provided by CDBStepper that may be used to alter the color of the component, which includes mainColor, activeColor, completeColor, and incompleteColor. The color style defined in mainColor is overwritten when styling CDBStepper with activeColor, completeColor, and incompleteColor.

01
Basic Information
02
Personal Data
03
Terms and Conditions
04
Finish
js
import React, { useState } from "react";
import styled from '@emotion/styled'
import { CDBStepper, CDBStep, CDBInput, CDBBtn, CDBContainer } from "cdbreact";




const Stepper = () => {
  const [active, setActive] = useState(1);


  const handleNextPrevClick = a => {
    setActive(a);
  };
  return (
    <CDBContainer>
      <CDBStepper direction="horizontal" activeColor="#666666" completeColor="#505050" incompleteColor="#666666">
        <CDBStep
          id={1}
          name="Basic Information"
          handleClick={() => handleNextPrevClick(1)}
          active={active}
          component={<Step1 handleNextPrevClick={handleNextPrevClick} />}
        />
        <CDBStep
          id={2}
          name="Personal Data"
          handleClick={() => handleNextPrevClick(2)}
          active={active}
          component={<Step2 handleNextPrevClick={handleNextPrevClick} />}
        />
        <CDBStep
          id={3}
          name="Terms and Conditions"
          handleClick={() => handleNextPrevClick(3)}
          active={active}
          component={<Step3 handleNextPrevClick={handleNextPrevClick} />}
        />
        <CDBStep
          id={4}
          name="Finish"
          handleClick={() => handleNextPrevClick(4)}
          active={active}
          component={<Step4 handleNextPrevClick={handleNextPrevClick} />}
        />
      </CDBStepper>
    </CDBContainer>
  );
};


export default Stepper;


const Step4 = ({ handleNextPrevClick }) => {
  return (
    <StepContainer md="12">
      <div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
        <div
          style={{
            margin: '0 auto',
            maxWidth: '500px',
            borderRadius: '10px',
            background: '#f5f5f5',
            boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
          }}
        >
          <FlexColumnContainer>
            <div
              style={{
                textAlign: 'center',
                padding: '20px 0 10px 0',
                color: '#939393',
                fontSize: '30px',
                fontWeight: 'bold',
              }}
            >
              Step 4
            </div>
            <FlexColumnContainer width="100%">
              <div style={{ fontSize: '25px', textAlign: 'center' }}>
                Congratulations! You have completed this process.
                <span style={{ fontSize: '50px', display: 'block' }} role="img" aria-label="image">
                  🎉
                </span>
              </div>
              <div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
                <CDBBtn
                  flat
                  outline
                  circle={false}
                  color="secondary"
                  onClick={() => handleNextPrevClick(3)}
                >
                  Previous
                </CDBBtn>
              </div>
            </FlexColumnContainer>
          </FlexColumnContainer>
        </div>
      </div>
    </StepContainer>
  );
};


const Step3 = ({ handleNextPrevClick }) => {
  return (
    <StepContainer>
      <div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
        <div
          style={{
            margin: '0 auto',
            maxWidth: '500px',
            borderRadius: '10px',
            background: '#f5f5f5',
            boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
          }}
        >
          <FlexColumnContainer>
            <div
              style={{
                textAlign: 'center',
                padding: '20px 0 10px 0',
                color: '#939393',
                fontSize: '30px',
                fontWeight: 'bold',
              }}
            >
              Step 3
            </div>
            <FlexColumnContainer width="100%">
              <div
                style={{
                  fontSize: '10px',
                  fontWeight: '200',
                  maxHeight: '300px',
                  overflowY: 'auto',
                }}
              >
                <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 style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
                <CDBBtn
                  className="float-start"
                  circle={false}
                  color="secondary"
                  flat
                  outline
                  onClick={() => handleNextPrevClick(2)}
                >
                  Previous
                </CDBBtn>
                <CDBBtn
                  className="float-end"
                  flat
                  color="secondary"
                  circle={false}
                  onClick={() => handleNextPrevClick(4)}
                >
                  Next
                </CDBBtn>
              </div>
            </FlexColumnContainer>
          </FlexColumnContainer>
        </div>
      </div>
    </StepContainer>
  );
};


const Step2 = ({ handleNextPrevClick }) => {
  return (
    <StepContainer md="12">
      <div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
        <div
          style={{
            margin: '0 auto',
            maxWidth: '500px',
            borderRadius: '10px',
            background: '#f5f5f5',
            boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
          }}
        >
          <FlexColumnContainer>
            <div
              style={{
                textAlign: 'center',
                padding: '20px 0 10px 0',
                color: '#939393',
                fontSize: '30px',
                fontWeight: 'bold',
              }}
            >
              Step 2
            </div>
            <FlexColumnContainer width="100%">
              <CDBInput color="secondary" label="FirstName" />
              <CDBInput color="secondary" label="LastName" />
              <CDBInput color="secondary" label="Surname" />
              <CDBInput color="secondary" label="Address" />
              <CDBInput color="secondary" label="Country" />
              <div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
                <CDBBtn
                  color="secondary"
                  flat
                  className="float-start"
                  circle={false}
                  outline
                  onClick={() => handleNextPrevClick(1)}
                >
                  Previous
                </CDBBtn>
                <CDBBtn
                  color="secondary"
                  circle={false}
                  flat
                  className="float-end"
                  onClick={() => handleNextPrevClick(3)}
                >
                  Next
                </CDBBtn>
              </div>
            </FlexColumnContainer>
          </FlexColumnContainer>
        </div>
      </div>
    </StepContainer>
  );
};


const Step1 = ({ handleNextPrevClick }) => {
  return (
    <StepContainer>
      <div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
        <div
          style={{
            margin: '0 auto',
            maxWidth: '500px',
            borderRadius: '10px',
            background: '#f5f5f5',
            boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
          }}
        >
          <FlexColumnContainer>
            <div
              style={{
                textAlign: 'center',
                padding: '20px 0 10px 0',
                color: '#939393',
                fontSize: '30px',
                fontWeight: 'bold',
              }}
            >
              Step 1
            </div>
            <FlexColumnContainer width="100%">
              <CDBInput color="secondary" label="Username" />
              <CDBInput color="secondary" label="Email" />
              <CDBInput color="secondary" label="Password" />
              <CDBInput color="secondary" label="Confirm Password" />
              <div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
                <CDBBtn
                  color="secondary"
                  flat
                  circle={false}
                  className="float-end"
                  onClick={() => handleNextPrevClick(2)}
                >
                  Next
                </CDBBtn>
              </div>
            </FlexColumnContainer>
          </FlexColumnContainer>
        </div>
      </div>
    </StepContainer>
  );
};


const FlexColumnContainer = styled('div')`
  padding: 10px;
  display: flex;
  flex-direction: column;
  width: ${props => props.width};
  justify-content: ${props => (props.justifyContent ? props.justifyContent : 'center')};
  align-items: ${props => (props.alignItems ? props.alignItems : 'center')};
  box-sizing: border-box;
`;
const StepContainer = styled('div')`
  width: 100%;
  height: 100%;
`;

Additionally, CDBStep provides options for modifying its background color. activeBgColor and activeTextColor may be used to modify the background color and color of a step when it is active. You may change the background and text colors of a step when it comes before an active step by using the props completeBgColor and completeTextColor. Steps that come after an active step can have their background and text colors changed using the properties incompleteBgColor and incompleteTextColor, respectively. Any specified relating color style from CDBStepper is replaced when using any of these properties defined in CDBStep.

01
02
03
04
js
import React, { useState } from "react";
import styled from '@emotion/styled'
import { CDBStepper, CDBStep, CDBInput, CDBBtn, CDBContainer } from "cdbreact";




export const Stepper = () => {
  const [active, setActive] = useState(1);


  const handleNextPrevClick = a => {
    setActive(a);
  };
  return (
    <CDBContainer>
      <CDBStepper direction="horizontal" showTitle={false} showTooltip={false} activeColor="#666666" completeColor="#505050" incompleteColor="#666666">
        <CDBStep
          id={1}
          name="Basic Information"
          handleClick={() => handleNextPrevClick(1)}
          active={active}
          component={<Step1 handleNextPrevClick={handleNextPrevClick} />}
        />
        <CDBStep
          id={2}
          name="Personal Data"
          handleClick={() => handleNextPrevClick(2)}
          active={active}
          component={<Step2 handleNextPrevClick={handleNextPrevClick} />}
        />
        <CDBStep
          id={3}
          name="Terms and Conditions"
          handleClick={() => handleNextPrevClick(3)}
          active={active}
          component={<Step3 handleNextPrevClick={handleNextPrevClick} />}
          activeBgColor='blue'
          activeTextColor='blue'
          incompleteBgColor='#A45A52'
          incompleteTextColor='lightgray'
          completeBgColor='green'
          completeTextColor='white'
        />
        <CDBStep
          id={4}
          name="Finish"
          handleClick={() => handleNextPrevClick(4)}
          active={active}
          component={<Step4 handleNextPrevClick={handleNextPrevClick} />}
        />
      </CDBStepper>
    </CDBContainer>
  );
};




const Step4 = ({ handleNextPrevClick }) => {
  return (
    <StepContainer md="12">
      <div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
        <div
          style={{
            margin: '0 auto',
            maxWidth: '500px',
            borderRadius: '10px',
            background: '#f5f5f5',
            boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
          }}
        >
          <FlexColumnContainer>
            <div
              style={{
                textAlign: 'center',
                padding: '20px 0 10px 0',
                color: '#939393',
                fontSize: '30px',
                fontWeight: 'bold',
              }}
            >
              Step 4
            </div>
            <FlexColumnContainer width="100%">
              <div style={{ fontSize: '25px', textAlign: 'center' }}>
                Congratulations! You have completed this process.
                <span style={{ fontSize: '50px', display: 'block' }} role="img" aria-label="image">
                  🎉
                </span>
              </div>
              <div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
                <CDBBtn
                  flat
                  outline
                  circle={false}
                  color="secondary"
                  onClick={() => handleNextPrevClick(3)}
                >
                  Previous
                </CDBBtn>
              </div>
            </FlexColumnContainer>
          </FlexColumnContainer>
        </div>
      </div>
    </StepContainer>
  );
};


const Step3 = ({ handleNextPrevClick }) => {
  return (
    <StepContainer>
      <div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
        <div
          style={{
            margin: '0 auto',
            maxWidth: '500px',
            borderRadius: '10px',
            background: '#f5f5f5',
            boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
          }}
        >
          <FlexColumnContainer>
            <div
              style={{
                textAlign: 'center',
                padding: '20px 0 10px 0',
                color: '#939393',
                fontSize: '30px',
                fontWeight: 'bold',
              }}
            >
              Step 3
            </div>
            <FlexColumnContainer width="100%">
              <div
                style={{
                  fontSize: '10px',
                  fontWeight: '200',
                  maxHeight: '300px',
                  overflowY: 'auto',
                }}
              >
                <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 style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
                <CDBBtn
                  className="float-start"
                  circle={false}
                  color="secondary"
                  flat
                  outline
                  onClick={() => handleNextPrevClick(2)}
                >
                  Previous
                </CDBBtn>
                <CDBBtn
                  className="float-end"
                  flat
                  color="secondary"
                  circle={false}
                  onClick={() => handleNextPrevClick(4)}
                >
                  Next
                </CDBBtn>
              </div>
            </FlexColumnContainer>
          </FlexColumnContainer>
        </div>
      </div>
    </StepContainer>
  );
};


const Step2 = ({ handleNextPrevClick }) => {
  return (
    <StepContainer md="12">
      <div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
        <div
          style={{
            margin: '0 auto',
            maxWidth: '500px',
            borderRadius: '10px',
            background: '#f5f5f5',
            boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
          }}
        >
          <FlexColumnContainer>
            <div
              style={{
                textAlign: 'center',
                padding: '20px 0 10px 0',
                color: '#939393',
                fontSize: '30px',
                fontWeight: 'bold',
              }}
            >
              Step 2
            </div>
            <FlexColumnContainer width="100%">
              <CDBInput color="secondary" label="FirstName" />
              <CDBInput color="secondary" label="LastName" />
              <CDBInput color="secondary" label="Surname" />
              <CDBInput color="secondary" label="Address" />
              <CDBInput color="secondary" label="Country" />
              <div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
                <CDBBtn
                  color="secondary"
                  flat
                  className="float-start"
                  circle={false}
                  outline
                  onClick={() => handleNextPrevClick(1)}
                >
                  Previous
                </CDBBtn>
                <CDBBtn
                  color="secondary"
                  circle={false}
                  flat
                  className="float-end"
                  onClick={() => handleNextPrevClick(3)}
                >
                  Next
                </CDBBtn>
              </div>
            </FlexColumnContainer>
          </FlexColumnContainer>
        </div>
      </div>
    </StepContainer>
  );
};


const Step1 = ({ handleNextPrevClick }) => {
  return (
    <StepContainer>
      <div style={{ width: '100%', background: '#f9f9f9', padding: '30px 10px', height: '100%' }}>
        <div
          style={{
            margin: '0 auto',
            maxWidth: '500px',
            borderRadius: '10px',
            background: '#f5f5f5',
            boxShadow: '0px 4px 10px 0 rgba(0, 0, 0, 0.05)',
          }}
        >
          <FlexColumnContainer>
            <div
              style={{
                textAlign: 'center',
                padding: '20px 0 10px 0',
                color: '#939393',
                fontSize: '30px',
                fontWeight: 'bold',
              }}
            >
              Step 1
            </div>
            <FlexColumnContainer width="100%">
              <CDBInput color="secondary" label="Username" />
              <CDBInput color="secondary" label="Email" />
              <CDBInput color="secondary" label="Password" />
              <CDBInput color="secondary" label="Confirm Password" />
              <div style={{ marginTop: '20px', display: 'flex', justifyContent: 'space-around' }}>
                <CDBBtn
                  color="secondary"
                  flat
                  circle={false}
                  className="float-end"
                  onClick={() => handleNextPrevClick(2)}
                >
                  Next
                </CDBBtn>
              </div>
            </FlexColumnContainer>
          </FlexColumnContainer>
        </div>
      </div>
    </StepContainer>
  );
};


const FlexColumnContainer = styled('div')`
  padding: 10px;
  display: flex;
  flex-direction: column;
  width: ${props => props.width};
  justify-content: ${props => (props.justifyContent ? props.justifyContent : 'center')};
  align-items: ${props => (props.alignItems ? props.alignItems : 'center')};
  box-sizing: border-box;
`;
const StepContainer = styled('div')`
  width: 100%;
  height: 100%;
`;

API Reference: Contrast React Bootstrap 5 Step Props

The props you get to use with the Contrast React Bootstrap 5 Step component will be elaborated on in this section. You'll understand what these props are for, how to utilize them in your code, and what their default values are.

Other options for the 'CDBStep' are listed in the table below.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBStep className="myClass" ... />
idNumberProvides an ID for the step<CDBStep id={1} ... />
far, fab, fasBooleanDefines Font Awesome style. Recommend to use with icon props<CDBStep fas .../>
nameStringSpecifies the text content within CDBStep's tooltip which is visible on hover event<CDBStep name="label" ... />
iconStringDefines icon used within CDBStep<CDBStep icon="folder-open" ... />
componentNode
Defines the component that shows when the step is active<CDBStep component={
} ... />
activeBgColorStringSpecifies the step's background color when the step is active<CDBStep activeBgColor="yellow" ... />
activeTextColorStringSpecifies the step's text color when the step is active<CDBStep activeTextColor="black" ... />
completeBgColorStringSpecifies the step's background color if the step precedes the active step.<CDBStep completeBgColor="green" ... />
completeTextColorStringSpecifies the step's text color if the step have been completed<CDBStep completeTextColor="white" ... />
incompleteBgColorStringSpecifies the step's background color if the step comes after the active step.<CDBStep incompleteBgColor="red" ... />
incompleteTextColorStringSpecifies the step's text color if the step comes after the active step.<CDBStep incompleteTextColor="white" ... />

API Reference: Contrast React Bootstrap 5 Stepper Props

The props you get to use with the Contrast React Bootstrap 5 Step component will be elaborated on in this section. You'll understand what these props are for, how to utilize them in your code, and what their default values are.

Other options for the CDBStepper are listed in the table below.

NameTypeDefaultDescriptionExample
directionStringhorizontalRequired! Controls the orientation of generated stepper. Can be either vertical or horizontal<CDBStepper direction="vertical" ... />
stepSizenumber45defines size of steps<CDBStepper stepSize={50} ... />
showTooltipbooleantruedefines whether tooltip popper is shown<CDBStepper showTooltip ... />
showTitlebooleantruedefines whether title and step index is shown<CDBStepper showTitle ... />
showIndexbooleanfalsedefines whether step index is shown<CDBStep showIndex ... />
mainColorStringSpecifies the steps background color in all state (active, previous, next)<CDBStep mainColor="gray" ... />
activeColorStringSpecifies the steps background color in the active state.<CDBStep activeColor="green" ... />
completeColorStringSpecifies the steps background color when the steps precede the active state<CDBStep completeColor="green" ... />
incompletColorStringSpecifies the steps background color when the steps come after the active step.<CDBStep incompleteColor="red" ... />
tooltipColorStringSpecifies the tooltip's background color.<CDBStep tooltipColor="yellow" ... />

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.

Previous
Switch
Next
Tab