A simple Bootstrap steps plugin, support mobile client.
See Demo.
Must include Bootstrap 4.
Install Bootstrap steps package:
$ npm install bootstrap-steps
or
$ yarn add bootstrap-steps
Import to your scss file and build:
@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-steps/scss/bootstrap-steps';
Or use CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"><!-- Bootstrap is required -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-steps@%5E1.0/dist/bootstrap-steps.min.css">
<ul class="steps">
<li class="step step-success">
<div class="step-content">
<span class="step-circle">1</span>
<span class="step-text">Step 1</span>
</div>
</li>
<li class="step step-active">
<div class="step-content">
<span class="step-circle">2</span>
<span class="step-text">Step 2</span>
</div>
</li>
<li class="step">
<div class="step-content">
<span class="step-circle">3</span>
<span class="step-text">Step 3</span>
</div>
</li>
<li class="step">
<div class="step-content">
<span class="step-circle">4</span>
<span class="step-text">Step 4</span>
</div>
</li>
</ul>
If you think this package has helped you, please consider Becoming a sponsor to support my work~ and your avatar will be visible on my major projects.