Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including bs-breakpoints with all npm packages installed. Try it out:

var bsBreakpoints = require("bs-breakpoints")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

bs-breakpoints v1.1.0

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

bs-breakpoints

npm version dependencies Status devDependencies Status Build Status JavaScript Style Guide JS gzip size

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

CDNLink
jsDelivrhttps://cdn.jsdelivr.net/npm/bs-breakpoints/dist/bs-breakpoints.js
jsDelivr, minifiedhttps://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

License

MIT

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free