August 13, 2022

A Simple Bootstrap 4 Steps Plugin | Bootstrap Steps

Bootstrap Steps plugin is simple and supports mobile clients. The CSS extension for Bootstrap 4 allows you to create a responsive, SEO-friendly step bar to showcase the current steps users are going through in the wizard process.

bootstrap 4 stepper, step wizard bootstrap, bootstrap 4 vertical step wizard example, vertical horizontal stepper bootstrap, bootstrap 4 multi step form wizard with validation

How to make use of it:

1. Install the package.

# Yarn
$ yarn add bootstrap-steps

# NPM
$ npm install bootstrap-steps --save

2. Import the Bootstrap Steps.

@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-steps/scss/bootstrap-steps';

3. Or instantly load the bootstrap-steps.min.css after Bootstrap’s stylesheet.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<link rel="stylesheet" href="/path/to/bootstrap-steps.min.css" />

4. Create steps from a standard HTML unordered list.

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

Linear Step-by-Step Flow, step progress bar bootstrap, Bootstrap Steps Plugin/Github, form wizard bootstrap


See Demo And Download

Official Website(ycs77): Click Here

This superior jQuery/javascript plugin is developed by ycs77. For extra Advanced Usages, please go to the official website.

Share

You may also like...

Leave a Reply

Your email address will not be published.