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.

Must Read: A Plugin for Bootstrap 5 That Allows Building Intro Tours

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>

See Demo And Download

Official Website(ycs77): Click Here

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

Related Posts

vuejs-dialog-plugin

Vuejs Lightweight Prompt Based On Promise And Confirm Dialog

VUEJS DIALOG PLUGIN is a lightweight, promise-based, prompt, and dialog-based alert. Important updates The dialog will always be resolved by an object. (ie a callback to continue…

browser-alert-confirm-dialog-alert4html-js

Insert HTML Into Your Browser Alert & Confirm Dialog | alert4html.js

alert4html.js is a JavaScript library that enables you to insert HTML directly into your browser alerts while simulating Chrome alerts as well. alert4html.js is an alternative to…

Lightweight-Flexbox-Carousel-Plugin

Simple and Lightweight Flexbox Carousel Plugin With JavaScript | flexCarousel.js

Flexbox Responsive Slider – flexCarousel.js plugin is a simple and lightweight plug-in from Flexbox carousel ES6 JavaScript. An unofficial fork by Slick Carousel. Flex Carousel is a…

bootstrap-5-multi-level-dropdown

Multi-Level Dropdown Works With Bootstrap 5

Bootstrap 5 Multi-Level Dropdown, using the official HTML without adding additional CSS styles and classes, it’s just like the original support. Not all of the things listed…

jquery-confirmation-dialog

JQuery UI Built Dynamic Modal That Uses Bootstrap | confirm.js

confirm.js is to use confirm modal created using JQuery and Bootstrap. Put events in each custom button in your web application. Easy to implement, saves time. Requirements…

bootstrap-responsive-navbar

[Bootstrap 5] Responsive Navbar With off-canvas Display on Mobile

The Bootstrap 5-off-canvas navigation menu is a responsive navigation system that combines BS5 components outside of the canvas and navbar. Must Read: Pure CSS Mobile-friendly Responsive Table…

Leave a Reply

Your email address will not be published. Required fields are marked *