Github Stars:
Last Commit: 
Created: 
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
or
yarn add bs-stepper
CDN
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
.fadeclass to the content and set animation to true. - To create a vertical stepper, add the
.verticalclass 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.
