Detect Bootstrap 4 Breakpoints Using JavaScript - bs-breakpoints

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.

1. Install the bs-breakpoints with 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" 
<!-- JavaScript -->
<script src=""></script>

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

// init 
// detect

5. Return the current active responsive breakpoint.


6. Trigger an event when the breakpoint changes.

$(window).on('', function (e) {
  // on init
$(window).on('', function (e) {
  // on change

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

  • Publication date: 08.10.2018
  • Source