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>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>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>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>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>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 z-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 z-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>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>