Bs Stepper

Updated: 29 Dec 2020

455 Stars

A stepper for Bootstrap 4.x

Overview

bs-stepper is a plugin for Bootstrap 4 that provides a stepper functionality for web developers. It can be used with React and Angular as it is written with VanillaJS, one of the most commonly used JavaScript frameworks.

Features

Linear stepper: Allows for a step-by-step progression.
Non-linear stepper: Supports a non-sequential ordering of steps.
Fade effect with .fade: Provides a fading animation effect for transitions.
Vertical stepper: Enables a vertical orientation for the stepper.
Works with Bootstrap 4: Integrates seamlessly with Bootstrap 4 components.
Accessible: Ensures accessibility for all users.
No dependencies required: Does not need jQuery or other dependencies.
Built-in UMD: Can be used universally with Universal Module Definition.
Lightweight: Only 2kb in size.

Installation

Install with npm or yarn

npm install bs-stepper

yarn add bs-stepper

CDN

jsDelivr (js minified): Link
jsDelivr (css minified): Link

How to Use

HTML markup

Include the CSS file:

<link rel="stylesheet" href="path/to/bs-stepper.min.css">

Add the following HTML:

<div class="bs-stepper">
  <!-- Steps go here -->
</div>

For fade animation, add the .fade class to the content and set animation to true.
To create a vertical stepper, add the .vertical class to the stepper.

JavaScript

Include the script at the end of the <body> tag.
Create a stepper instance:

document.addEventListener('DOMContentLoaded', function() {
  var stepper = new Stepper(document.querySelector('.bs-stepper'));
});

Summary

bs-stepper is a customizable and lightweight plugin for Bootstrap 4 that provides a versatile stepper functionality. It offers various features like linear and non-linear steppers, fade effects, and compatibility with different browsers. The plugin is easy to install using npm, yarn, or CDN and can be used with or without other dependencies.