Process Steps

Process Steps

Process steps show a numbered, multi-stage flow such as a checkout, onboarding, or how-it-works sequence. The .process-steps list holds one <li> per step, each with a styled circle (number or icon) and a heading, and a process-* modifier sets how many steps appear per row.

Structure

• .process-steps : the <ul> (or <ol>) wrapper for the whole flow.
• .process-2, .process-3, .process-5 : layout modifiers for the number of steps shown per row.
• Each step <li> : a Bootstrap grid column (for example col-sm-6 col-lg-3) holding the circle and heading.
• .i-style : the styled step circle (an <a>), holding a number or an icon class.
• .i-bordered : outlined circle variant.
• .i-alt : alternate color treatment for the circle.
• .bg-color : fills the circle with the theme color.
• .rounded-circle : makes the step marker a full circle.
• .active : marks the current step as active.

Markup

<ul class="process-steps process-2 row col-mb-30 justify-content-center mb-4">
    <li class="col-sm-6 col-lg-3 active">
        <a href="#" class="i-style rounded-circle i-alt mx-auto bg-color">1</a>
        <h5>Complete Payment</h5>
    </li>
    <li class="col-sm-6 col-lg-3">
        <a href="#" class="i-bordered i-style rounded-circle mx-auto bi-download"></a>
        <h5>Download File</h5>
    </li>
</ul>

Variants

Three-step flow with numbers

<ul class="process-steps process-3 row col-mb-30 justify-content-center mb-4">
    <li class="col-sm-6 col-lg-4 active">
        <a href="#" class="i-style rounded-circle i-alt mx-auto bg-color">1</a>
        <h5>Review Cart</h5>
    </li>
    <li class="col-sm-6 col-lg-4">
        <a href="#" class="i-bordered i-style rounded-circle mx-auto">2</a>
        <h5>Enter Shipping</h5>
    </li>
    <li class="col-sm-6 col-lg-4">
        <a href="#" class="i-bordered i-style rounded-circle mx-auto">3</a>
        <h5>Confirm Order</h5>
    </li>
</ul>

Icon steps

Use a Bootstrap Icons class directly on the .i-style element instead of a number.

<li class="col-sm-6 col-lg-3">
    <a href="#" class="i-bordered i-style rounded-circle mx-auto bi-credit-card"></a>
    <h5>Secure Payment</h5>
</li>

Tips

• Use .active on the <li> for the current step so the connecting line and marker highlight up to that point.
• Match the column classes to the process-* modifier: col-lg-3 for .process-2 in a four-across layout, col-lg-4 for .process-3.
• mx-auto centers each step marker inside its column.