Component is designed to showcase numbered steps of the process or timeline.
Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.
Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.
Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.
<!-- Horizontal steps -->
<!-- Convert steps to horizontal layout on certain breakpoint by adding steps-horizontal-sm, steps-horizontal-md, steps-horizontal-lg, steps-horizontal-xl, steps-horizontal-xxl -->
<div class="steps steps-horizontal-md">
<!-- Active step -->
<div class="step active">
<div class="step-number">
<div class="step-number-inner">01</div>
</div>
<div class="step-body">
<h5 class="pb-1 mb-2">Choose your course</h5>
<p class="mb-0">Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.</p>
</div>
</div>
<!-- Step -->
<div class="step active">
<div class="step-number">
<div class="step-number-inner">02</div>
</div>
<div class="step-body">
<h5 class="pb-1 mb-2">Learn by doing</h5>
<p class="mb-0">Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.</p>
</div>
</div>
<!-- Step -->
<div class="step active">
<div class="step-number">
<div class="step-number-inner">03</div>
</div>
<div class="step-body">
<h5 class="pb-1 mb-2">Get instant feedback</h5>
<p class="mb-0">Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.</p>
</div>
</div>
</div>// Horizontal steps
// Convert steps to horizontal layout on certain breakpoint by adding steps-horizontal-sm, steps-horizontal-md, steps-horizontal-lg, steps-horizontal-xl, steps-horizontal-xxl
.steps.steps-horizontal-md
// Active step
.step.active
.step-number
.step-number-inner 01
.step-body
h5.pb-1.mb-2 Choose your course
p.mb-0 Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.
// Step
.step
.step-number
.step-number-inner 02
.step-body
h5.pb-1.mb-2 Learn by doing
p.mb-0 Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.
// Step
.step
.step-number
.step-number-inner 03
.step-body
h5.pb-1.mb-2 Get instant feedback
p.mb-0 Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.
Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.
Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.
Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.
<!-- Animate steps on hover -->
<!-- Create hoverable steps by adding "steps-hoverable" class -->
<div class="steps steps-horizontal-md steps-hoverable">
<!-- Step -->
<div class="step">
<div class="step-number">
<div class="step-number-inner">01</div>
</div>
<div class="step-body">
<h5 class="pb-1 mb-2">Choose your course</h5>
<p class="mb-0">Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.</p>
</div>
</div>
<!-- Step -->
<div class="step active">
<div class="step-number">
<div class="step-number-inner">02</div>
</div>
<div class="step-body">
<h5 class="pb-1 mb-2">Learn by doing</h5>
<p class="mb-0">Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.</p>
</div>
</div>
<!-- Step -->
<div class="step active">
<div class="step-number">
<div class="step-number-inner">03</div>
</div>
<div class="step-body">
<h5 class="pb-1 mb-2">Get instant feedback</h5>
<p class="mb-0">Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.</p>
</div>
</div>
</div>// Horizontal steps
// Convert steps to horizontal layout on certain breakpoint by adding steps-horizontal-sm, steps-horizontal-md, steps-horizontal-lg, steps-horizontal-xl, steps-horizontal-xxl
.steps.steps-horizontal-md.steps-hoverable
// Step
.step
.step-number
.step-number-inner 01
.step-body
h5.pb-1.mb-2 Choose your course
p.mb-0 Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.
// Step
.step
.step-number
.step-number-inner 02
.step-body
h5.pb-1.mb-2 Learn by doing
p.mb-0 Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.
// Step
.step
.step-number
.step-number-inner 03
.step-body
h5.pb-1.mb-2 Get instant feedback
p.mb-0 Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.
Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.
Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.
Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.
Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.
Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.
Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.
<!-- Center aligned steps -->
<div class="steps steps-horizontal-md steps-center">
...
</div>
<!-- Right aligned steps -->
<div class="steps steps-horizontal-md steps-end">
...
</div>// Center aligned steps
.steps.steps-horizontal-md.steps-center
// ...
// Right aligned steps
.steps.steps-horizontal-md.steps-end
// ...
Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.
Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.
Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.
<!-- Vertical steps (default) -->
<div class="steps">
<!-- Active step -->
<div class="step active">
<div class="step-number">
<div class="step-number-inner">01</div>
</div>
<div class="step-body">
<h5 class="pb-1 mb-2">Choose your course</h5>
<p class="mb-0">Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.</p>
</div>
</div>
<!-- Step -->
<div class="step active">
<div class="step-number">
<div class="step-number-inner">02</div>
</div>
<div class="step-body">
<h5 class="pb-1 mb-2">Learn by doing</h5>
<p class="mb-0">Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.</p>
</div>
</div>
<!-- Step -->
<div class="step active">
<div class="step-number">
<div class="step-number-inner">03</div>
</div>
<div class="step-body">
<h5 class="pb-1 mb-2">Get instant feedback</h5>
<p class="mb-0">Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.</p>
</div>
</div>
</div>// Vertical steps (default)
.steps
// Active step
.step.active
.step-number
.step-number-inner 01
.step-body
h5.pb-1.mb-2 Choose your course
p.mb-0 Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.
// Step
.step
.step-number
.step-number-inner 02
.step-body
h5.pb-1.mb-2 Learn by doing
p.mb-0 Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.
// Step
.step
.step-number
.step-number-inner 03
.step-body
h5.pb-1.mb-2 Get instant feedback
p.mb-0 Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.
Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.
Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.
Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.
<!-- Steps without connector -->
<!-- Remove the connector between steps by adding "steps-no-connector" class -->
<div class="steps steps-no-connector">
<!-- Active step -->
<div class="step active">
<div class="step-number">
<div class="step-number-inner">01</div>
</div>
<div class="step-body">
<h5 class="pb-1 mb-2">Choose your course</h5>
<p class="mb-0">Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.</p>
</div>
</div>
<!-- Step -->
<div class="step">
<div class="step-number">
<div class="step-number-inner">02</div>
</div>
<div class="step-body">
<h5 class="pb-1 mb-2">Learn by doing</h5>
<p class="mb-0">Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.</p>
</div>
</div>
<!-- Step -->
<div class="step">
<div class="step-number">
<div class="step-number-inner">03</div>
</div>
<div class="step-body">
<h5 class="pb-1 mb-2">Get instant feedback</h5>
<p class="mb-0">Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.</p>
</div>
</div>
</div>// Steps without connector
// Remove the connector between steps by adding "steps-no-connector" class
.steps.steps-no-connector
// Active step
.step.active
.step-number
.step-number-inner 01
.step-body
h5.pb-1.mb-2 Choose your course
p.mb-0 Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.
// Step
.step
.step-number
.step-number-inner 02
.step-body
h5.pb-1.mb-2 Learn by doing
p.mb-0 Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.
// Step
.step
.step-number
.step-number-inner 03
.step-body
h5.pb-1.mb-2 Get instant feedback
p.mb-0 Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.
Find aute irure dolor in reprehenderi voluptate velit esse cillum dolore eu fugiat nulla pariatur luctus.
Risus quam quis at euismod vitae dui elementu eu in diam malesuada mattis ut urna integer erat nibh.
<!-- Card like steps -->
<!-- Card with border (default) example -->
<div class="position-relative d-flex justify-content-end my-3 py-1">
<div class="btn btn-lg btn-icon btn-primary fs-xl fw-bold rounded-circle position-absolute top-50 start-0 translate-middle-y zindex-2 pe-none">01</div>
<div class="card ps-3" style="width: calc(100% - 1.75rem);">
<div class="card-body ps-4">
<h3 class="h5 card-title pb-2 mb-1">Formulation of the problem</h3>
<p class="card-text">Find aute irure dolor in reprehenderi voluptate velit esse cillum dolore eu fugiat nulla pariatur luctus.</p>
</div>
</div>
</div>
<!-- Card with gray background example -->
<div class="position-relative d-flex justify-content-end my-3 py-1">
<div class="btn btn-lg btn-icon btn-primary fs-xl fw-bold rounded-circle position-absolute top-50 start-0 translate-middle-y zindex-2 pe-none">02</div>
<div class="card border-0 bg-secondary ps-3" style="width: calc(100% - 1.75rem);">
<div class="card-body ps-4">
<h3 class="h5 card-title pb-2 mb-1">Assessment of the current state</h3>
<p class="card-text">Risus quam quis at euismod vitae dui elementu eu in diam malesuada mattis ut urna integer erat nibh.</p>
</div>
</div>
</div>// Card like steps
// Card with border (default) example
.position-relative.d-flex.justify-content-end.my-3.py-1
.btn.btn-lg.btn-icon.btn-primary.fs-xl.fw-bold.rounded-circle.position-absolute.top-50.start-0.translate-middle-y.zindex-2
| 01
.card.ps-1(style="width: calc(100% - 1.75rem);")
.card-body
h3.h5.card-title.pb-2.mb-1 Formulation of the problem
p.card-text Find aute irure dolor in reprehenderi voluptate velit esse cillum dolore eu fugiat nulla pariatur luctus.
// Card with gray background example
.position-relative.d-flex.justify-content-end.my-3.py-1
.btn.btn-lg.btn-icon.btn-primary.fs-xl.fw-bold.rounded-circle.position-absolute.top-50.start-0.translate-middle-y.zindex-2
| 02
.card.border-0.bg-secondary.ps-1(style="width: calc(100% - 1.75rem);")
.card-body
h3.h5.card-title.pb-2.mb-1 Assessment of the current state
p.card-text Risus quam quis at euismod vitae dui elementu eu in diam malesuada mattis ut urna integer erat nibh.
Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.
Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.
Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.
<!-- Steps with icons instead of numbers -->
<div class="steps">
<!-- Active step -->
<div class="step active">
<div class="step-number">
<div class="step-number-inner fs-4">
<i class="ai-search"></i>
</div>
</div>
<div class="step-body">
<h5 class="pb-1 mb-2">Research & Analysis</h5>
<p class="mb-0">Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.</p>
</div>
</div>
<!-- Step -->
<div class="step active">
<div class="step-number">
<div class="step-number-inner fs-4">
<i class="ai-layout-side"></i>
</div>
</div>
<div class="step-body">
<h5 class="pb-1 mb-2">Prototyping</h5>
<p class="mb-0">Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.</p>
</div>
</div>
<!-- Step -->
<div class="step active">
<div class="step-number">
<div class="step-number-inner fs-4">
<i class="ai-monitor"></i>
</div>
</div>
<div class="step-body">
<h5 class="pb-1 mb-2">Pixel-perfect UI Design</h5>
<p class="mb-0">Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.</p>
</div>
</div>
</div>// Steps with icons instead of numbers
.steps
// Active step
.step.active
.step-number
.step-number-inner.fs-4
i.ai-search
.step-body
h5.pb-1.mb-2 Research & Analysis
p.mb-0 Nulla faucibus mauris pellentesque blandit faucibus non. Sit ut et at suspendisse gravida hendrerit.
// Step
.step
.step-number
.step-number-inner.fs-4
i.ai-layout-side
.step-body
h5.pb-1.mb-2 Prototyping
p.mb-0 Tristique sed pharetra feugiat tempor sagittis. Ultricies eu bibendum adipiscing lacinia.
// Step
.step
.step-number
.step-number-inner.fs-4
i.ai-monitor
.step-body
h5.pb-1.mb-2 Pixel-perfect UI Design
p.mb-0 Duis euismod enim, facilisis risus tellus pharetra lectus diam neque. Nec ultrices mi faucibus est.