Detect Bootstrap 4 Breakpoints Using JavaScript - bs-breakpoints

bs-breakpoints is a JavaScript plugin for Bootstrap 4 breakpoint detection that detects and display the current active responsive breakpoint in your Bootstrap 4 project.

Works as Vanilla JavaScript or jQuery Plugin.

How to use it:

1. Install the bs-breakpoints with NPM.

# NPM
$ npm install bs-breakpoints --save

2. Import the bs-breakpoints.

import bsBreakpoints from 'bs-breakpoints'

3. Or load the bs-breakpoints library from a CDN.

<!-- Bootstrap 4 Stylesheet -->
<link rel="stylesheet" 
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
      integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
      crossorigin="anonymous">
<!-- JavaScript -->
<script src="https://unpkg.com/bs-breakpoints/dist/bs-breakpoints.min.js"></script>

4. Initialize the plugin and detect the Bootstrap 4 Breakpoints.

// init 
bsBreakpoints.init();

// detect
bsBreakpoints.detectBreakpoint();

5. Return the current active responsive breakpoint.

bsBreakpoints.getCurrentBreakpoint();

6. Trigger an event when the breakpoint changes.

$(window).on('init.bs.breakpoint', function (e) {
  // on init
})

$(window).on('new.bs.breakpoint', function (e) {
  // on change
})

Changelog:

2019-07-05

• v1.1.1: fix(core): detection at the edges of breakpoints min limits

2018-12-28

• v1.1.0: fix(core): detect breakpoints when init isn't called

---

This awesome jQuery plugin is developed by Johann-S. For more Advanced Usages, please check the demo page or visit the official website.