Steps
A step shows the completion status of an activity in a series of activities.
Example
The steps component has one step at least.
Title
Description
<div class="steps">
<div class="step">
<h5>Title</h5>
<p>Description</p>
</div>
</div>
An example with three steps.
1
Shipping
2
Billing
3
Confirmation
<div class="steps flex-lg-row">
<div class="step">
<h5>1</h5>
<p>Payment</p>
</div>
<div class="step">
<h5>2</h5>
<p>Billing</p>
</div>
<div class="step">
<h5>3</h5>
<p>Confirmation</p>
</div>
</div>
Use .w-100 class to give to steps component a full width.
1
Shipping
2
Billing
3
Confirmation
<div class="steps flex-lg-row w-100">
<div class="step">
<h5>1</h5>
<p>Payment</p>
</div>
<div class="step">
<h5>2</h5>
<p>Billing</p>
</div>
<div class="step">
<h5>3</h5>
<p>Confirmation</p>
</div>
</div>
Icons
Use Font Awesome icons.
Shipping
Billing
Confirmation
<div class="steps flex-lg-row w-100">
<div class="step">
<h5 class="mb-2"><i class="fas fa-shipping-fast fa-2x"></i></h5>
<p>Shipping</p>
</div>
<div class="step">
<h5 class="mb-2"><i class="far fa-credit-card fa-2x"></i></h5>
<p>Billing</p>
</div>
<div class="step">
<h5 class="mb-2"><i class="fas fa-check-double fa-2x"></i></h5>
<p>Confirmation</p>
</div>
</div>
Finished steps
Add .step-done class on a step to indicate a finished step.
Shipping
Billing
Confirmation
<div class="steps flex-lg-row w-100">
<div class="step step-done">
<h5 class="mb-2"><i class="fas fa-shipping-fast fa-2x"></i></h5>
<p>Shipping</p>
</div>
<div class="step step-done">
<h5 class="mb-2"><i class="far fa-credit-card fa-2x"></i></h5>
<p>Billing</p>
</div>
<div class="step">
<h5 class="mb-2"><i class="fas fa-check-double fa-2x"></i></h5>
<p>Confirmation</p>
</div>
</div>