You can utilize .step{-sm|-md|-lg|-xl} classes to change when they are horizontally aligned.
This example is horizontally aligned above -md resolution and vertically below. Resize the window to see it in action.
Achieve virtually any design and layout from within the one template.
We strive to figure out ways to help your business grow through all platforms.
Find what you need in one template and combine features at will.
<ul class="step step-md">
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">1</span>
<div class="step-content">
<h4 class="step-title">First step</h4>
<p class="step-text">Achieve virtually any design and layout from within the one template.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">2</span>
<div class="step-content">
<h4 class="step-title">Second step</h4>
<p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">3</span>
<div class="step-content">
<h4 class="step-title">Third step</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
</ul>
By default .step is vertically aligned.
Achieve virtually any design and layout from within the one template.
We strive to figure out ways to help your business grow through all platforms.
Find what you need in one template and combine features at will.
<ul class="step">
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">1</span>
<div class="step-content">
<h4 class="step-title">First step</h4>
<p class="step-text">Achieve virtually any design and layout from within the one template.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">2</span>
<div class="step-content">
<h4 class="step-title">Second step</h4>
<p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">3</span>
<div class="step-content">
<h4 class="step-title">Third step</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
</ul>
Achieve virtually any design and layout from within the one template.
We strive to figure out ways to help your business grow through all platforms.
Find what you need in one template and combine features at will.
<ul class="step">
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary"><i class="bi bi-check"></i></span>
<div class="step-content">
<h4 class="step-title">First step</h4>
<p class="step-text">Achieve virtually any design and layout from within the one template.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary"><i class="bi bi-check"></i></span>
<div class="step-content">
<h4 class="step-title">Second step</h4>
<p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary"><i class="bi bi-check"></i></span>
<div class="step-content">
<h4 class="step-title">Third step</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
</ul>
Add any of the below mentioned modifier classes to change the appearance of a step.
Achieve virtually any design and layout from within the one template.
We strive to figure out ways to help your business grow through all platforms.
Find what you need in one template and combine features at will.
Find what you need in one template and combine features at will.
Find what you need in one template and combine features at will.
Find what you need in one template and combine features at will.
Find what you need in one template and combine features at will.
Find what you need in one template and combine features at will.
<ul class="step">
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-primary rounded-circle text-white">1</span>
<div class="step-content">
<h4 class="step-title">Primary</h4>
<p class="step-text">Achieve virtually any design and layout from within the one template.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-secondary rounded-circle text-white">2</span>
<div class="step-content">
<h4 class="step-title">Secondary</h4>
<p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-success rounded-circle text-white">3</span>
<div class="step-content">
<h4 class="step-title">Success</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-danger rounded-circle text-white">4</span>
<div class="step-content">
<h4 class="step-title">Danger</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-warning rounded-circle text-dark">5</span>
<div class="step-content">
<h4 class="step-title">Warning</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-info rounded-circle text-white">6</span>
<div class="step-content">
<h4 class="step-title">Info</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-dark rounded-circle text-white">7</span>
<div class="step-content">
<h4 class="step-title">Dark</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-light rounded-circle text-dark">8</span>
<div class="step-content">
<h4 class="step-title">Light</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
</ul>
Including bg-opacity-*
Achieve virtually any design and layout from within the one template.
We strive to figure out ways to help your business grow through all platforms.
Find what you need in one template and combine features at will.
Find what you need in one template and combine features at will.
Find what you need in one template and combine features at will.
Find what you need in one template and combine features at will.
Find what you need in one template and combine features at will.
Find what you need in one template and combine features at will.
<ul class="step">
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">1</span>
<div class="step-content">
<h4 class="step-title">Primary</h4>
<p class="step-text">Achieve virtually any design and layout from within the one template.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-secondary bg-opacity-10 rounded-circle text-secondary">2</span>
<div class="step-content">
<h4 class="step-title">Secondary</h4>
<p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-success bg-opacity-10 rounded-circle text-success">3</span>
<div class="step-content">
<h4 class="step-title">Success</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-danger bg-opacity-10 rounded-circle text-danger">4</span>
<div class="step-content">
<h4 class="step-title">Danger</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-warning bg-opacity-10 rounded-circle text-warning">5</span>
<div class="step-content">
<h4 class="step-title">Warning</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-info bg-opacity-10 rounded-circle text-info">6</span>
<div class="step-content">
<h4 class="step-title">Info</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-dark bg-opacity-10 rounded-circle text-dark">7</span>
<div class="step-content">
<h4 class="step-title">Dark</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-light bg-opacity-10 rounded-circle text-dark">8</span>
<div class="step-content">
<h4 class="step-title">Light</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
</ul>
Use .step-border-last-0 to remove the border from the last item.
Achieve virtually any design and layout from within the one template.
We strive to figure out ways to help your business grow through all platforms.
Find what you need in one template and combine features at will.
<ul class="step step-md step-border-last-0">
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">1</span>
<div class="step-content">
<h4 class="step-title">First step</h4>
<p class="step-text">Achieve virtually any design and layout from within the one template.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">2</span>
<div class="step-content">
<h4 class="step-title">Second step</h4>
<p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">3</span>
<div class="step-content">
<h4 class="step-title">Third step</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
</ul>
Achieve virtually any design and layout from within the one template.
We strive to figure out ways to help your business grow through all platforms.
Find what you need in one template and combine features at will.
<ul class="step step-border-last-0">
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">1</span>
<div class="step-content">
<h4 class="step-title">First step</h4>
<p class="step-text">Achieve virtually any design and layout from within the one template.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">2</span>
<div class="step-content">
<h4 class="step-title">Second step</h4>
<p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">3</span>
<div class="step-content">
<h4 class="step-title">Third step</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
</ul>
Use .step-dashed for a dashed style border.
Achieve virtually any design and layout from within the one template.
We strive to figure out ways to help your business grow through all platforms.
Find what you need in one template and combine features at will.
<ul class="step step-md step-dashed">
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">1</span>
<div class="step-content">
<h4 class="step-title">First step</h4>
<p class="step-text">Achieve virtually any design and layout from within the one template.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">2</span>
<div class="step-content">
<h4 class="step-title">Second step</h4>
<p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">3</span>
<div class="step-content">
<h4 class="step-title">Third step</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
</ul>
Use .step-centered to center align.
Achieve virtually any design and layout from within the one template.
We strive to figure out ways to help your business grow through all platforms.
Find what you need in one template and combine features at will.
<ul class="step step-md step-centered">
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">1</span>
<div class="step-content">
<h4 class="step-title">First step</h4>
<p class="step-text">Achieve virtually any design and layout from within the one template.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">2</span>
<div class="step-content">
<h4 class="step-title">Second step</h4>
<p class="step-text">We strive to figure out ways to help your business grow through all platforms.</p>
</div>
</div>
</li>
<li class="step-item">
<div class="step-content-wrapper">
<span class="step-icon bg-primary bg-opacity-10 rounded-circle text-primary">3</span>
<div class="step-content">
<h4 class="step-title">Third step</h4>
<p class="step-text">Find what you need in one template and combine features at will.</p>
</div>
</div>
</li>
</ul>