Progress Tracker

new

Progress tracker displays a user’s steps and progress through a set of steps.

Contents

Bootstrap 5 Progress Tracker component

Progress tracker component provide the status of each step within a multistep process and give visibility on the length of the overall sequence.

Basic example

In the example below, can click the next and prev button to changing the current progress of actions.

Step 1
Step 2
Step 3
Step 4

Step 1 content

Step 2 content

Step 3 content

Step 4 content

<ol class="progress-tracker" id="basicProgressTracker">
  <li class="progress-tracker-item completed" aria-current="true" data-bs-target="#basicExampleStep1">
    <span class="progress-tracker-label">Step 1</span>
  </li>
  <li class="progress-tracker-item active" aria-current="true" data-bs-target="#basicExampleStep2">
    <span class="progress-tracker-label">Step 2</span>
  </li>
  <li class="progress-tracker-item" data-bs-target="#basicExampleStep3">
    <span class="progress-tracker-label">Step 3</span>
  </li>
  <li class="progress-tracker-item" data-bs-target="#basicExampleStep4">
    <span class="progress-tracker-label">Step 4</span>
  </li>
</ol>
<div class="tab-content">
  <div class="tab-pane" id="basicExampleStep1">Step 1 content</div>
  <div class="tab-pane active" id="basicExampleStep2">Step 2 content</div>
  <div class="tab-pane" id="basicExampleStep3">Step 3 content</div>
  <div class="tab-pane" id="basicExampleStep4">Step 4 content</div>
</div>

Completed

Add a .completed class to .progress-tracker-item to marked current step have been completed.

Step 1
Step 2
Step 3
Step 4

<ol class="progress-tracker">
  <li class="progress-tracker-item completed">
      <span class="progress-tracker-label">Step 1</span>
  </li>
  <li class="progress-tracker-item completed">
    <span class="progress-tracker-label">Step 2</span>
  </li>
  <li class="progress-tracker-item completed">
    <span class="progress-tracker-label">Step 3</span>
  </li>
  <li class="progress-tracker-item completed">
    <span class="progress-tracker-label">Step 4</span>
  </li>
</ol>

Disabled a step

Use a .disabled to disable one of progress steps. Since this progress step is disabled will not allows prev and next to this step.

Disabled step
Completed step
Current step
Uncompleted step 1

<ol class="progress-tracker">
  <li class="progress-tracker-item disabled completed">
      <span class="progress-tracker-label">Disabled step</span>
  </li>
  <li class="progress-tracker-item completed">
    <span class="progress-tracker-label">Completed step</span>
  </li>
  <li class="progress-tracker-item active" aria-current="true">
    <span class="progress-tracker-label">Current step</span>
  </li>
  <li class="progress-tracker-item">
    <span class="progress-tracker-label">Uncompleted step 1</span>
  </li>
</ol>

Sizes

The progress tracker component has 1 additional size: .progress-tracker-sm for small of the progress tracker.

Small

Step 1
Step 2
Step 3

Large

Step 1
Step 2
Step 3

<div>
  <p class="text-muted fs-sm">Small</p>
  <ol class="progress-tracker progress-tracker-sm">
    <li class="progress-tracker-item completed">
      <span class="progress-tracker-label">Step 1 </span>
    </li>
    <li class="progress-tracker-item active">
      <span class="progress-tracker-label">Step 2</span>
    </li>
    <li class="progress-tracker-item">
      <span class="progress-tracker-label">Step 3</span>
    </li>
  </ol>
</div>
<div>
  <p class="text-muted fs-sm">Large</p>
  <ol class="progress-tracker">
    <li class="progress-tracker-item completed">
      <span class="progress-tracker-label">Step 1</span>
    </li>
    <li class="progress-tracker-item active">
      <span class="progress-tracker-label">Step 2</span>
    </li>
    <li class="progress-tracker-item">
      <span class="progress-tracker-label">Step 3</span>
    </li>
  </ol>
</div>

Contents

Usage

Via JavaScript

The progress tracker component only manually to active with:

const progressTracker = new bootstrap.ProgressTracker('#myProgressTracker');

Methods

You can create a progress tracker instance with the progress tracker constructor with an optional options object.

const myProgressTrackerElement = document.querySelector('#myProgressTracker');
const progressTracker = new bootstrap.ProgressTracker(myProgressTrackerElement);

Method	Description
`dispose`	Destroys an element’s carousel. (Removes stored data on the DOM element)
`getInstance`	Static method which allows you to get the progress tracker instance associated to a DOM element, you can use it like this: `bootstrap.ProgressTracker.getInstance(element)`
`getOrCreateInstance`	Static method which returns a tracker instance instance associated to a DOM element or create a new one in case it wasn’t initialized. You can use it like this: `bootstrap.ProgressTracker.getOrCreateInstance(element)`
`next`	Selects and focuses the next step in list.
`prev`	Selects and focuses the previous step in list.
`reset`	Resets all steps to initial state.

Events

The product tracker component exposes a few events for hooking into the product tracker.

Event type	Description
`change.fbs.progressTracker`	This event fires when the step is to be change.
`changed.fbs.progressTracker`	This event fires after the step has been changed.

All event have the following additional properties:

selectedIndex: The index of the selected step in the step list
selectedStep: The DOM element of the selected step
previouslySelectedIndex: The index of the previous step in the step list
previouslySelectedStep: The DOM element of the previous step

const myProgressTracker = document.getElementById('myProgressTracker')
myProgressTracker.addEventListener('change.fbs.progressTracker', event => {
  // do something, for instance, explicitly move focus to the most appropriate element,
  // so it doesn't get lost/reset to the start of the page
  // document.getElementById('...').focus()
})