bs-breakpoints

A plugin which detect Bootstrap 4 breakpoints and emit when there is a change.

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

Features:

Works with Bootstrap 4
Works without dependencies and jQuery
Can work with jQuery if detected
Detect custom breakpoints in CSS properties
Built in UMD to be used everywhere
Small, only 2kb and less if you gzip it

Install
How to use it
Methods
Events
Support me
License

Install

With npm or yarn

npm install bs-breakpoints --save

// yarn
yarn add bs-breakpoints

CDN

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

How to use it

You should wait for the document ready event and call the init method to detect breakpoint changes. We expose one global variable available everywhere: bsBreakpoints

Vanilla JS

document.addEventListener('DOMContentLoaded', function () {
  bsBreakpoints.init()
})

With jQuery

$(document).ready(function () {
  bsBreakpoints.init()
})

Use it with npm

import bsBreakpoints from 'bs-breakpoints'

For more examples check out this file.

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

Methods

init

Will detect the current breakpoint and emit init.bs.breakpoint event.

It'll add a listener on the window resize event and emit new.bs.breakpoint event.

detectBreakpoint

Detect the current breakpoint and return it.

getCurrentBreakpoint

Return the current breakpoint.

Events

init.bs.breakpoint

Emitted just once when bsBreakpoints.init() is called.

This event contains the current breakpoint in the detail attribute in VanillaJS and for those who use jQuery we add a breakpoint key in jQuery's events.

new.bs.breakpoint

This event is emitted when there is a breakpoint changes.