Buy now
Steps
Series of steps or conditions that the user needs to complete in order to accomplish a goal.
Finder component
Inline steps: Default
1
Basic info
2
Company details
3
Job details
4
Post a job
<!-- Inline steps: Default -->
<div class="steps">
<div class="step active">
<div class="step-progress">
<span class="step-progress-start"></span>
<span class="step-progress-end"></span>
<span class="step-number">1</span>
</div>
<div class="step-label">Basic info</div>
</div>
<div class="step active">
<div class="step-progress">
<span class="step-progress-start"></span>
<span class="step-progress-end"></span>
<span class="step-number">2</span>
</div>
<div class="step-label">Company details</div>
</div>
<div class="step">
<div class="step-progress">
<span class="step-progress-start"></span>
<span class="step-progress-end"></span>
<span class="step-number">3</span>
</div>
<div class="step-label">Job details</div>
</div>
<div class="step">
<div class="step-progress">
<span class="step-progress-start"></span>
<span class="step-progress-end"></span>
<span class="step-number">4</span>
</div>
<div class="step-label">Post a job</div>
</div>
</div>// Inline steps: Default
.steps
.step.active
.step-progress
span.step-progress-start
span.step-progress-end
span.step-number 1
.step-label Basic info
.step.active
.step-progress
span.step-progress-start
span.step-progress-end
span.step-number 2
.step-label Company details
.step
.step-progress
span.step-progress-start
span.step-progress-end
span.step-number 3
.step-label Job details
.step
.step-progress
span.step-progress-start
span.step-progress-end
span.step-number 4
.step-label Post a job
Inline steps: Links
<!-- Inline steps: Default -->
<div class="steps">
<a href="#" class="step active">
<div class="step-progress">
<span class="step-progress-start"></span>
<span class="step-progress-end"></span>
<span class="step-number">1</span>
</div>
<div class="step-label">Basic info</div>
</a>
<a href="#" class="step active">
<div class="step-progress">
<span class="step-progress-start"></span>
<span class="step-progress-end"></span>
<span class="step-number">2</span>
</div>
<div class="step-label">Company details</div>
</a>
<a href="#" class="step">
<div class="step-progress">
<span class="step-progress-start"></span>
<span class="step-progress-end"></span>
<span class="step-number">3</span>
</div>
<div class="step-label">Job details</div>
</a>
<a href="#" class="step">
<div class="step-progress">
<span class="step-progress-start"></span>
<span class="step-progress-end"></span>
<span class="step-number">4</span>
</div>
<div class="step-label">Post a job</div>
</a>
</div>// Inline steps: Default
.steps
a(href="#").step.active
.step-progress
span.step-progress-start
span.step-progress-end
span.step-number 1
.step-label Basic info
a(href="#").step.active
.step-progress
span.step-progress-start
span.step-progress-end
span.step-number 2
.step-label Company details
a(href="#").step
.step-progress
span.step-progress-start
span.step-progress-end
span.step-number 3
.step-label Job details
a(href="#").step
.step-progress
span.step-progress-start
span.step-progress-end
span.step-number 4
.step-label Post a job
Inline steps: Light version
1
Basic info
2
Company details
3
Job details
4
Post a job
<!-- Inline steps: Light version -->
<div class="steps steps-light">
<div class="step active">
<div class="step-progress">
<span class="step-progress-start"></span>
<span class="step-progress-end"></span>
<span class="step-number">1</span>
</div>
<div class="step-label">Basic info</div>
</div>
<div class="step active">
<div class="step-progress">
<span class="step-progress-start"></span>
<span class="step-progress-end"></span>
<span class="step-number">2</span>
</div>
<div class="step-label">Company details</div>
</div>
<div class="step">
<div class="step-progress">
<span class="step-progress-start"></span>
<span class="step-progress-end"></span>
<span class="step-number">3</span>
</div>
<div class="step-label">Job details</div>
</div>
<div class="step">
<div class="step-progress">
<span class="step-progress-start"></span>
<span class="step-progress-end"></span>
<span class="step-number">4</span>
</div>
<div class="step-label">Post a job</div>
</div>
</div>// Inline steps: Light version
.steps.steps-light
.step.active
.step-progress
span.step-progress-start
span.step-progress-end
span.step-number 1
.step-label Basic info
.step.active
.step-progress
span.step-progress-start
span.step-progress-end
span.step-number 2
.step-label Company details
.step
.step-progress
span.step-progress-start
span.step-progress-end
span.step-number 3
.step-label Job details
.step
.step-progress
span.step-progress-start
span.step-progress-end
span.step-number 4
.step-label Post a job
Card based: Default
01
Create a Job Ad
In volutpat lacus orci volutpat nulla tristique eu. Ullamcorper in est lectus cras.
02
Select a Pricing Plan
Cursus duis ridiculus purus eget velit mattis id vel. Semper aliquet auctor cras dui.
03
Post Your Job
Sit auctor aliquam leo duis. Praesent ut penatibus faucibus nibh arcu tempor.
<!-- Card based steps -->
<div class="row gy-3">
<div class="col-md-4">
<div class="card card-hover card-body border-0">
<div class="h2 text-primary mb-2 pb-1">01</div>
<h3 class="h5 card-title">Create a Job Ad</h3>
<p class="card-text fs-sm">In volutpat lacus orci volutpat nulla tristique eu. Ullamcorper in est lectus cras.</p>
</div>
</div>
<div class="col-md-4">
<div class="card card-hover card-body border-0">
<div class="h2 text-primary mb-2 pb-1">02</div>
<h3 class="h5 card-title">Select a Pricing Plan</h3>
<p class="card-text fs-sm">Cursus duis ridiculus purus eget velit mattis id vel. Semper aliquet auctor cras dui.</p>
</div>
</div>
<div class="col-md-4">
<div class="card card-hover card-body border-0">
<div class="h2 text-primary mb-2 pb-1">03</div>
<h3 class="h5 card-title">Post Your Job</h3>
<p class="card-text fs-sm">Sit auctor aliquam leo duis. Praesent ut penatibus faucibus nibh arcu tempor.</p>
</div>
</div>
</div>// Card based steps
.row.gy-3
.col-md-4
.card.card-hover.card-body.border-0
.h2.text-primary.mb-2.pb-1 01
h3.h5.card-title Create a Job Ad
p.card-text.fs-sm In volutpat lacus orci volutpat nulla tristique eu. Ullamcorper in est lectus cras.
.col-md-4
.card.card-hover.card-body.border-0
.h2.text-primary.mb-2.pb-1 02
h3.h5.card-title Select a Pricing Plan
p.card-text.fs-sm Cursus duis ridiculus purus eget velit mattis id vel. Semper aliquet auctor cras dui.
.col-md-4
.card.card-hover.card-body.border-0
.h2.text-primary.mb-2.pb-1 03
h3.h5.card-title Post Your Job
p.card-text.fs-sm Sit auctor aliquam leo duis. Praesent ut penatibus faucibus nibh arcu tempor.
Card based: Light version
01
Create a Job Ad
In volutpat lacus orci volutpat nulla tristique eu. Ullamcorper in est lectus cras.
02
Select a Pricing Plan
Cursus duis ridiculus purus eget velit mattis id vel. Semper aliquet auctor cras dui.
03
Post Your Job
Sit auctor aliquam leo duis. Praesent ut penatibus faucibus nibh arcu tempor.
<!-- Card based steps: Light version -->
<div class="row gy-3">
<div class="col-md-4">
<div class="card card-light card-hover card-body bg-transparent">
<div class="h2 text-primary mb-2 pb-1">01</div>
<h3 class="h5 card-title">Create a Job Ad</h3>
<p class="card-text fs-sm opacity-60">In volutpat lacus orci volutpat nulla tristique eu. Ullamcorper in est lectus cras.</p>
</div>
</div>
<div class="col-md-4">
<div class="card card-light card-hover card-body bg-transparent">
<div class="h2 text-primary mb-2 pb-1">02</div>
<h3 class="h5 card-title">Select a Pricing Plan</h3>
<p class="card-text fs-sm opacity-60">Cursus duis ridiculus purus eget velit mattis id vel. Semper aliquet auctor cras dui.</p>
</div>
</div>
<div class="col-md-4">
<div class="card card-light card-hover card-body bg-transparent">
<div class="h2 text-primary mb-2 pb-1">03</div>
<h3 class="h5 card-title">Post Your Job</h3>
<p class="card-text fs-sm opacity-60">Sit auctor aliquam leo duis. Praesent ut penatibus faucibus nibh arcu tempor.</p>
</div>
</div>
</div>// Card based steps: Light version
.row.gy-3
.col-md-4
.card.card-light.card-hover.card-body.bg-transparent
.h2.text-primary.mb-2.pb-1 01
h3.h5.card-title Create a Job Ad
p.card-text.fs-sm.opacity-60 In volutpat lacus orci volutpat nulla tristique eu. Ullamcorper in est lectus cras.
.col-md-4
.card.card-light.card-hover.card-body.bg-transparent
.h2.text-primary.mb-2.pb-1 02
h3.h5.card-title Select a Pricing Plan
p.card-text.fs-sm.opacity-60 Cursus duis ridiculus purus eget velit mattis id vel. Semper aliquet auctor cras dui.
.col-md-4
.card.card-light.card-hover.card-body.bg-transparent
.h2.text-primary.mb-2.pb-1 03
h3.h5.card-title Post Your Job
p.card-text.fs-sm.opacity-60 Sit auctor aliquam leo duis. Praesent ut penatibus faucibus nibh arcu tempor.