Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Start Bootstrap is an open source library of free Bootstrap themes and templates. All of the free themes and templates on Start Bootstrap are released under the MIT license, which means you can use them for any purpose, even for commercial projects.

Stars: ✭ 2,304 (+782.76%)

Mutual labels: bootstrap, bootstrap4, bootstrap-4

Startbootstrap Shop Homepage

A shop homepage Bootstrap HTML template created by Start Bootstrap

Stars: ✭ 261 (+0%)

Mutual labels: bootstrap, bootstrap4, bootstrap-4

Bootstrap Dark

Bootstrap 4 dark theme that supports togging dark/light themes as well. There is no fluff, it changes the color of Bootstrap and that's it, no new thing to learn or unlearn, just Bootstrap, but Dark!

Stars: ✭ 158 (-39.46%)

Mutual labels: bootstrap, bootstrap4, bootstrap-4

Startbootstrap Thumbnail Gallery

A Bootstrap thumbnail gallery template created by Start Bootstrap

Stars: ✭ 166 (-36.4%)

Mutual labels: bootstrap, bootstrap4, bootstrap-4

Startbootstrap Blog Post

A Bootstrap HTML template for blog posts - created by Start Bootstrap

Stars: ✭ 199 (-23.75%)

Mutual labels: bootstrap, bootstrap4, bootstrap-4

Startbootstrap Clean Blog Jekyll

Start Bootstrap is an open source library of free Bootstrap templates and themes. All of the free templates and themes on Start Bootstrap are released under the MIT license, which means you can use them for any purpose, even for commercial projects.

Stars: ✭ 1,837 (+603.83%)

Mutual labels: bootstrap, bootstrap4, bootstrap-4

Startbootstrap One Page Wonder

A simple, one page, Bootstrap HTML website template created by Start Bootstrap

Stars: ✭ 249 (-4.6%)

Mutual labels: bootstrap, bootstrap4, bootstrap-4

Startbootstrap Bare

A bare Bootstrap HTML starter template for rapid development - created by Start Bootstrap

Stars: ✭ 235 (-9.96%)

Mutual labels: bootstrap, bootstrap4, bootstrap-4

vanillajs-hello

Start a VanillaJS website using WebPack in just 30 seconds: HTML,CSS,Babel,SASS,Bootstrap,Prettier,Gitpod

Stars: ✭ 24 (-90.8%)

Mutual labels: vanilla-javascript, vanilla-js, vanillajs

Startbootstrap Creative

Stars: ✭ 1,900 (+627.97%)

Mutual labels: bootstrap, bootstrap4, bootstrap-4

Startbootstrap Simple Sidebar

Stars: ✭ 1,833 (+602.3%)

Mutual labels: bootstrap, bootstrap4, bootstrap-4

tensorflowjs-remove-background

Remove Background from the picture using WebAssembly & TensorFlow.js

Stars: ✭ 79 (-69.73%)

Mutual labels: vanilla-javascript, vanilla-js, vanillajs

Holy Grail Markup

All CSS methodologies compared examples at one place.

Stars: ✭ 197 (-24.52%)

Mutual labels: bootstrap, bootstrap4, bootstrap-4

Bootstrap4 Website

Website built with bootstrap 4 Framework

Stars: ✭ 124 (-52.49%)

Mutual labels: bootstrap, bootstrap4, css3

Startbootstrap Agency

Stars: ✭ 1,810 (+593.49%)

Mutual labels: bootstrap, bootstrap4, bootstrap-4

Startbootstrap Blog Home

A Bootstrap HTML template for blog homepages - created by Start Bootstrap

Stars: ✭ 215 (-17.62%)

Mutual labels: bootstrap, bootstrap4, bootstrap-4

Startbootstrap Sb Admin

Stars: ✭ 2,861 (+996.17%)

Mutual labels: bootstrap, bootstrap4, bootstrap-4

View All Similar Projects ➔

bs-stepper

A stepper plugin for Bootstrap 4.

You can use it on React and Angular too because this plugin is written with the most used JavaScript framework: VanillaJS.

Demo

If you want to see our latest changes check out https://bs-stepper.netlify.com/

Features:

Linear stepper
Non linear stepper
Fade effect with .fade
Vertical stepper
Works with Bootstrap 4
Accessible
Works without dependencies (so no jQuery needed)
Built in UMD so it can be used everywhere
Small, only 2kb

Install
How to use it
Methods
Events
Compatibility
Support me
Thanks
License

Install

With npm or yarn

# npm
npm install bs-stepper --save

# yarn
yarn add bs-stepper

CDN

CDN	Link
jsDelivr, js minified	`https://cdn.jsdelivr.net/npm/bs-stepper/dist/js/bs-stepper.min.js`
jsDelivr, css minified	`https://cdn.jsdelivr.net/npm/bs-stepper/dist/css/bs-stepper.min.css`

How to use it

HTML markup

Include the CSS file:

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

Add the following HTML:

<div class="bs-stepper">
  <div class="bs-stepper-header" role="tablist">
    <!-- your steps here -->
    <div class="step" data-target="#logins-part">
      <button type="button" class="step-trigger" role="tab" aria-controls="logins-part" id="logins-part-trigger">
        <span class="bs-stepper-circle">1</span>
        <span class="bs-stepper-label">Logins</span>
      </button>
    </div>
    <div class="line"></div>
    <div class="step" data-target="#information-part">
      <button type="button" class="step-trigger" role="tab" aria-controls="information-part" id="information-part-trigger">
        <span class="bs-stepper-circle">2</span>
        <span class="bs-stepper-label">Various information</span>
      </button>
    </div>
  </div>
  <div class="bs-stepper-content">
    <!-- your steps content here -->
    <div id="logins-part" class="content" role="tabpanel" aria-labelledby="logins-part-trigger"></div>
    <div id="information-part" class="content" role="tabpanel" aria-labelledby="information-part-trigger"></div>
  </div>
</div>

If you want to use the fade animation, add the .fade class on your .content and set animation to true.
To create a vertical stepper, just add the .vertical class on your stepper. All steppers will switch to vertical on small viewports.

JavaScript

Include the script before the end of the <body> HTML tag:

<script src="bs-stepper.min.js"></script>

Or with npm

import Stepper from 'bs-stepper'

Create a stepper

You should wait for the document ready event and create a new instance of Stepper.

Vanilla JS

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

With jQuery

$(document).ready(function () {
  var stepper = new Stepper($('.bs-stepper')[0])
})

For more examples check out this file.

This library is UMD-ready so you can use it everywhere.

Methods

constructor

Create an instance of Stepper, accepts two parameters.

Parameters

element
type: DOMElement

Pass your Stepper DOMElement

options (optional)

type: Object

default value:

{
  linear: true,
  animation: false,
  selectors: {
    steps: '.step',
    trigger: '.step-trigger',
    stepper: '.bs-stepper'
  }
}

Allows you to customize the stepper selectors and its behavior.

Will navigate to the next step of your stepper. This method also emits the show.bs-stepper event before showing the step and the shown.bs-stepper even when the step is displayed.

var stepper = new Stepper(document.querySelector('.bs-stepper'))
stepper.next()

Will navigate to the previous step of your stepper. This method also emits the show.bs-stepper event before showing the step and the shown.bs-stepper event when the step is displayed.

to

Will navigate to a step of your stepper. This method also emits the show.bs-stepper event before showing the step and the shown.bs-stepper event when the step is displayed.

var stepper = new Stepper(document.querySelector('.bs-stepper'))

/// Will navigate to the second step
stepper.to(2)

reset

Will reset your stepper to the first step (useful for linear stepper). This method also emits the show.bs-stepper before showing the step and the shown.bs-stepper event when the step is displayed.

destroy

Remove stored data related to your stepper and listeners.

Events

The methods which triggers a step change trigger two events:

show.bs-stepper
shown.bs-stepper

You can listen on those events like this:

var stepperEl = document.getElementById('stepper')
var stepper = new Stepper(stepperEl)

stepperEl.addEventListener('show.bs-stepper', function (event) {
  // You can call preventDefault to stop the rendering of your step
  // event.preventDefault()

  console.warn(event.detail.indexStep)
})

stepperEl.addEventListener('shown.bs-stepper', function (event) {
  console.warn('step shown')
})

The event detail object contains the following properties:

{
  indexStep: contains the id of the step which will be displayed,
  to: alias of indexStep,
  from: previous step id (or current step id)
}

If you need to prevent the display of a step, you have to call preventDefault on the show.bs-stepper listener.

Compatibility

bsStepper is compatible with:

IE10+
Edge
Firefox
Chrome
Safari
Chrome Android
Safari iOS

You can find our BrowserStack list of browsers here.

Support me

If you want to thank me or support my work:

You can become my Patron
Or buy me a coffee: PayPal

Thanks

Thanks to BrowserStack for providing the infrastructure that allows us to test in real browsers!

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Stars: ✭ 261

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (29) 🔗

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Johann-S / Bs Stepper

Programming Languages

Labels

Projects that are alternatives of or similar to Bs Stepper

bs-stepper

Table of contents

Install

With npm or yarn

CDN

How to use it

HTML markup

JavaScript

Create a stepper

Methods

constructor

Parameters

next

previous

to

reset

destroy

Events

Compatibility

Support me

Thanks

License