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
Table of contents
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.
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.
Support me
If you want to thank me, you can support me and become my Patron