View on GitHub

Stepped process

Stepped process bar used for multiple steps forms process

On this page

How to use

Use a nav element with .stepped-process class, containing an ordered list <ol> with .stepped-process-item class on list items.

Use short labels for each step, otherwise they will be cut off to preserve inline layout. More information can be carried on the title attribute of the .stepped-process-link.

Add .active to a .stepped-process-item to indicate the current step, alongside aria-current="step" to convey the active state to assistive technologies.

Example

html
<nav class="stepped-process" aria-label="Checkout process">
  <p class="float-start mt-2 me-2 fw-bold d-sm-none">Step</p>
  <ol>
    <li class="stepped-process-item">
      <a class="stepped-process-link" href="#" title="1. Sign in">Sign in</a>
    </li>
    <li class="stepped-process-item active">
      <a class="stepped-process-link" href="#" title="2. Review" aria-current="step">Review</a>
    </li>
    <li class="stepped-process-item">
      <a class="stepped-process-link" href="#" title="3. Delivery">Delivery</a>
    </li>
    <li class="stepped-process-item">
      <a class="stepped-process-link" href="#" title="4. Payment">Payment</a>
    </li>
    <li class="stepped-process-item">
      <a class="stepped-process-link" href="#" title="5. Place order">Place order</a>
    </li>
  </ol>
</nav>

CSS

Variables

Added in v5.2.0

As part of Boosted’s evolving CSS variables approach, stepped processes now use local CSS variables on .stepped-process for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

  --#{$prefix}stepped-process-font-size: #{$stepped-process-font-size};
  --#{$prefix}stepped-process-font-weight: #{$stepped-process-font-weight};
  --#{$prefix}stepped-process-counter: #{$stepped-process-counter};
  --#{$prefix}stepped-process-item-padding-y: #{$step-item-padding};
  --#{$prefix}stepped-process-item-padding-x: 0;
  --#{$prefix}stepped-process-item-margin-end: #{$step-item-margin-end};
  --#{$prefix}stepped-process-item-bg: #{$step-item-bg};
  --#{$prefix}stepped-process-item-active-bg: #{$step-item-active-bg};
  --#{$prefix}stepped-process-item-next-bg: #{$step-item-next-bg};
  --#{$prefix}stepped-process-item-drop-shadow: none;
  --#{$prefix}stepped-process-item-arrow-width: 0;
  --#{$prefix}stepped-process-item-arrow-shape: #{$step-item-arrow-shape};
  --#{$prefix}stepped-process-link-width: #{$step-link-width};
  --#{$prefix}stepped-process-link-line-height: #{$step-link-line-height};
  --#{$prefix}stepped-process-link-color: #{$step-link-color};
  --#{$prefix}stepped-process-link-active-color: #{$step-link-active-color};
  --#{$prefix}stepped-process-link-marker: #{$step-link-marker};
  --#{$prefix}stepped-process-link-text-decoration: #{$step-link-text-decoration};

  @include media-breakpoint-up(sm) {
    --#{$prefix}stepped-process-item-padding-x: 0;
    --#{$prefix}stepped-process-item-margin-end: 0;
    --#{$prefix}stepped-process-item-drop-shadow: #{$step-item-drop-shadow};
    --#{$prefix}stepped-process-item-arrow-width: #{$step-item-arrow-width};
  }

  @include media-breakpoint-up(xl) {
    --#{$prefix}stepped-process-link-width: none;
    --#{$prefix}stepped-process-link-marker: #{$step-link-marker-lg};
  }
  

Sass variables

For more details, please have a look at the exhaustive list of available variables:

$stepped-process-font-size:   $small-font-size;
$stepped-process-font-weight: $font-weight-bold;
$stepped-process-max-items:   5;
$stepped-process-counter:     step; // Used as a counter name

$step-item-padding:           7px;
// fusv-disable
$step-item-padding-end:       $step-item-padding * 2; // Deprecated in v5.2.0
// fusv-enable
$step-item-margin-end:        $border-width;
$step-item-bg:                $black;
$step-item-active-bg:         $primary;
$step-item-next-bg:           $gray-400;
$step-item-shadow-size:       $border-width * 1.5;
$step-item-drop-shadow:       drop-shadow($step-item-shadow-size 0 0 $white) #{"/* rtl:"} drop-shadow(-$step-item-shadow-size 0 0 $white) #{"*/"};

$step-item-arrow-width:       1rem;
$step-item-arrow-shape:       polygon(0% 0%, subtract(100%, $border-width) 50%, 0% 100%) #{"/* rtl:"} polygon(100% 0%, $border-width 50%, 100% 100%) #{"*/"}; // Used in clip-path

$step-link-width:             1.25ch; // Matches width of a single number
$step-link-color:             $white;
$step-link-active-color:      $black;
$step-link-line-height:       $line-height-sm;
$step-link-marker:            counter(var(--bs-stepped-process-counter)) inspect("\A0");
$step-link-marker-lg:         counter(var(--bs-stepped-process-counter)) inspect(".\A0");
$step-link-text-decoration:   $link-decoration;