Finder | Steps

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: Vertical

1

2017

Odio velit, massa augue etiam in parturient volutpat orci. Pulvinar amet, at est ac curabitur mauris, semper cursus metus. Imperdiet sed massa amet at turpis. Dis risus, donec in ac ultricies tempor eu, amet.

2

2018

Vitae erat ornare facilisi id sollicitudin turpis tempus, semper. Velit integer et volutpat, a. Massa ut amet amet, vitae nunc nulla sed.

3

2020

Ut mattis nascetur aliquam neque velit nunc sed. Morbi congue mauris amet ultrices molestie tellus proin odio diam. Feugiat elit, habitasse egestas egestas id nec potenti. Donec convallis donec tristique mattis et viverra.

4

2021

Tempor nullam pellentesque suspendisse nec. Arcu sagittis sed ut diam in ultrices. Leo lacinia feugiat interdum pellentesque nulla vitae duis.

<!-- Inline steps: Vertical -->
<div class="steps steps-vertical">
  <div class="step active">
    <div class="step-progress">
      <span class="step-progress-end"></span>
      <span class="step-number">1</span>
    </div>
    <div class="step-label">
      <h5 class="mb-2 pb-1">2017</h5>
      <p class="mb-0">Odio velit, massa augue etiam in parturient volutpat orci. Pulvinar amet, at est ac curabitur mauris, semper cursus metus. Imperdiet sed massa amet at turpis. Dis risus, donec in ac ultricies tempor eu, amet.</p>
    </div>
  </div>
  <div class="step active">
    <div class="step-progress">
      <span class="step-progress-end"></span>
      <span class="step-number">2</span>
    </div>
    <div class="step-label">
      <h5 class="mb-2 pb-1">2018</h5>
      <p class="mb-0">Vitae erat ornare facilisi id sollicitudin turpis tempus, semper. Velit integer et volutpat, a. Massa ut amet amet, vitae nunc nulla sed.</p>
    </div>
  </div>
  <div class="step">
    <div class="step-progress">
      <span class="step-progress-end"></span>
      <span class="step-number">3</span>
    </div>
    <div class="step-label">
      <h5 class="mb-2 pb-1">2020</h5>
      <p class="mb-0">Ut mattis nascetur aliquam neque velit nunc sed. Morbi congue mauris amet ultrices molestie tellus proin odio diam. Feugiat elit, habitasse egestas egestas id nec potenti. Donec convallis donec tristique mattis et viverra.</p>
    </div>
  </div>
  <div class="step">
    <div class="step-progress">
      <span class="step-progress-end"></span>
      <span class="step-number">4</span>
    </div>
    <div class="step-label">
      <h5 class="mb-2 pb-1">2021</h5>
      <p class="mb-0">Tempor nullam pellentesque suspendisse nec. Arcu sagittis sed ut diam in ultrices. Leo lacinia feugiat interdum pellentesque nulla vitae duis.</p>
    </div>
  </div>
</div>

// Inline steps: Vertical
.steps.steps-vertical
  .step.active
    .step-progress
      span.step-progress-end
      span.step-number 1
    .step-label
      h5.mb-2.pb-1
        | 2017
      p.mb-0
        | Odio velit, massa augue etiam in parturient volutpat orci. Pulvinar amet, at est ac curabitur mauris, semper cursus metus. Imperdiet sed massa amet at turpis. Dis risus, donec in ac ultricies tempor eu, amet.
  .step.active
    .step-progress
      span.step-progress-end
      span.step-number 2
    .step-label
      h5.mb-2.pb-1
        | 2018
      p.mb-0
        | Vitae erat ornare facilisi id sollicitudin turpis tempus, semper. Velit integer et volutpat, a. Massa ut amet amet, vitae nunc nulla sed.
  .step
    .step-progress
      span.step-progress-end
      span.step-number 3
    .step-label
      h5.mb-2.pb-1
        | 2020
      p.mb-0
        | Ut mattis nascetur aliquam neque velit nunc sed. Morbi congue mauris amet ultrices molestie tellus proin odio diam. Feugiat elit, habitasse egestas egestas id nec potenti. Donec convallis donec tristique mattis et viverra.
  .step
    .step-progress
      span.step-progress-end
      span.step-number 4
    .step-label
      h5.mb-2.pb-1
        | 2021
      p.mb-0
        | Tempor nullam pellentesque suspendisse nec. Arcu sagittis sed ut diam in ultrices. Leo lacinia feugiat interdum pellentesque nulla vitae duis.

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">
  <div class="col-md-4">
    <div class="card card-hover card-body border-0 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">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 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">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 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">Sit auctor aliquam leo duis. Praesent ut penatibus faucibus nibh arcu tempor.</p>
    </div>
  </div>
</div>

// Card based steps
.row
  .col-md-4
    .card.card-hover.card-body.border-0.bg-transparent
      .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.bg-transparent
      .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.bg-transparent
      .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: Links

01

<!-- Clickable card based steps (links) -->
<div class="row">
  <div class="col-md-4">
    <a href="#" class="card card-hover card-body border-0 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 text-body">In volutpat lacus orci volutpat nulla tristique eu. Ullamcorper in est lectus cras.</p>
    </a>
  </div>
  <div class="col-md-4">
    <a href="#" class="card card-hover card-body border-0 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 text-body">Cursus duis ridiculus purus eget velit mattis id vel. Semper aliquet auctor cras dui.</p>
    </a>
  </div>
  <div class="col-md-4">
    <a href="#" class="card card-hover card-body border-0 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 text-body">Sit auctor aliquam leo duis. Praesent ut penatibus faucibus nibh arcu tempor.</p>
    </a>
  </div>
</div>

// Clickable card based steps (links)
.row
  .col-md-4
    a(href="#").card.card-hover.card-body.border-0.bg-transparent
      .h2.text-primary.mb-2.pb-1 01
      h3.h5.card-title Create a Job Ad
      p.card-text.fs-sm.text-body In volutpat lacus orci volutpat nulla tristique eu. Ullamcorper in est lectus cras.
  .col-md-4
    a(href="#").card.card-hover.card-body.border-0.bg-transparent
      .h2.text-primary.mb-2.pb-1 02
      h3.h5.card-title Select a Pricing Plan
      p.card-text.fs-sm.text-body Cursus duis ridiculus purus eget velit mattis id vel. Semper aliquet auctor cras dui.
  .col-md-4
    a(href="#").card.card-hover.card-body.border-0.bg-transparent
      .h2.text-primary.mb-2.pb-1 03
      h3.h5.card-title Post Your Job
      p.card-text.fs-sm.text-body Sit auctor aliquam leo duis. Praesent ut penatibus faucibus nibh arcu tempor.

Card based: Alignment

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.

<!-- Center aligned step -->
<div class="card card-hover card-body border-0 bg-transparent text-center">
  <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>

<!-- Right aligned step -->
<div class="card card-hover card-body border-0 bg-transparent text-end">
  <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>

// Center aligned step
.card.card-hover.card-body.border-0.bg-transparent.text-center
  .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.

// Right aligned step
.card.card-hover.card-body.border-0.bg-transparent.text-end
  .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.

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">
  <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
  .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.