Detect Bootstrap Breakpoints Using JavaScript - bs-breakpoints

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

Works as Vanilla JavaScript or jQuery Plugin.

How to use it:

1. Install the bs-breakpoints with NPM.

# Yarn
$ yarn add bs-breakpoints

# NPM
$ npm install bs-breakpoints

2. Import the BreakpointDetector into your Bootstrap project.

import { BreakpointDetector } from 'bs-breakpoints';

3. Or load the bs-breakpoints library in your document. Make sure you first have the Bootstrap stylesheet loaded.

<!-- Bootstrap Stylesheet -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />

<!-- JavaScript -->
<script src="/path/to/dist/bs-breakpoints.umd.cjs"></script>

4. Create a new BreakpointDetector instance.

document.addEventListener('DOMContentLoaded', function () {
  const detector = new bsBreakpoints.BreakpointDetector();
})

5. Detect and get the current active responsive breakpoint.

// get breakpoints base on CSS properties
detector.getBreakPoints()

// get the current breakpoint
detector.getCurrentBreakpoint()

6. Add and remove custom breakpoints.

detector.addBreakpoint('largest', { 
  min: 2400, 
  max: Infinity 
});
detector.removeBreakpoint('largest');

7. Trigger an event when the breakpoint changes.

window.addEventListener('init.bs.breakpoint', function (e) {
  // e.detail
  // e.detail.breakpoint;
});

window.addEventListener('new.bs.breakpoint', function (e) {
  // e.detail
  // e.detail.breakpoint;
});

Changelog:

v2.1.0 (2024-08-01)

• core: allow to know if gt or lt compare to current breakpoint
• bugfixes

v2.0.1 (2024-07-30)

• Bug Fixes

v2.0.0 (2024-07-30)

• allow to add/remove a breakpoint
• core: return breakpoints
• core: rewrite in typescript
• work with the latest Bootstrap 5
• Bug Fixes

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.