--- title: Steps summary: Steps are used to guide users through complex processes, making them easier and more intuitive. Breaking a multi-step process into smaller parts and tracking progress along the way helps users complete it successfully. new: true description: Simplify complex processes with steps. --- ## Default markup Steps provide a clear visual representation of a user’s progress through a multi-step process. By showing what has been completed and what remains, steps enhance usability and encourage task completion. To create a default progress tracker, use the `.steps` class and define each step as a `.step-item`. The active step clearly indicates the current position in the process. ```html
Step 1 Step 2 Step 3
``` The example below demonstrates a simple progress tracker with four steps, where the third step is active. ```html example centered
Step 1 Step 2 Step 3 Step 4
``` ## Tooltips Add tooltips, if you want to provide users with additional information about the steps they are expected to complete. Tooltips are displayed when a user hovers over a given step and help clarify what might not be clear from the interface. To add a tooltip, use the `data-bs-toggle="tooltip"` attribute and specify the tooltip content with the `title` attribute. ```html Step 1 ``` The example below demonstrates a progress tracker with tooltips for each step. ```html example centered height="20rem"
Step 1 Step 2 Step 3 Step 4
``` ## Color You can customize the default progress indicator by changing the color to one that better suits your design. Click [here](/docs/ui/base/colors) to see the range of available colors. ```html
...
``` The example below demonstrates a progress tracker with two different color schemes. ```html example centered
Step 1 Step 2 Step 3 Step 4
Step 1 Step 2 Step 3 Step 4
``` ## Steps without title For designs with limited space, use progress indicators without titles and add tooltips to provide the necessary details. ```html example centered
``` ## Steps with numbers Use the `steps-counter` class to create a progress tracker with numbers instead of titles and change the color to customize it. ```html
...
``` The example below demonstrates a progress tracker with numbers and a different color scheme. ```html example centered
```