Detect Bootstrap Breakpoints Utilizing JavaScript – bs-breakpoints

bs-breakpoints is a JavaScript plugin for Bootstrap 5 & Bootstrap 4 breakpoint detection that detects and show the present energetic responsive breakpoint in your Bootstrap venture.

Works as Vanilla JavaScript or jQuery Plugin.

The best way to use it:

1. Set up the bs-breakpoints with NPM.

# Yarn
$ yarn add bs-breakpoints

# NPM
$ npm set up bs-breakpoints

2. Import the BreakpointDetector into your Bootstrap venture.

import { BreakpointDetector } from 'bs-breakpoints';

3. Or load the bs-breakpoints library in your doc. Be sure to first have the Bootstrap stylesheet loaded.

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

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

4. Create a brand new BreakpointDetector occasion.

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

5. Detect and get the present energetic responsive breakpoint.

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

// get the present breakpoint
detector.getCurrentBreakpoint()

6. Add and take away customized breakpoints.

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

7. Set off an occasion when the breakpoint adjustments.

window.addEventListener('init.bs.breakpoint', operate (e) {
  // e.element
  // e.element.breakpoint;
});

window.addEventListener('new.bs.breakpoint', operate (e) {
  // e.element
  // e.element.breakpoint;
});

Changelog:

v2.0.1 (2024-07-30)

v2.0.0 (2024-07-30)

• permit so as to add/take away a breakpoint
• core: return breakpoints
• core: rewrite in typescript
• work with the newest Bootstrap 5
• Bug Fixes

2019-07-05

• v1.1.1: repair(core): detection on the edges of breakpoints min limits

2018-12-28

• v1.1.0: repair(core): detect breakpoints when init is not referred to as

This superior jQuery plugin is developed by Johann-S. For extra Superior Usages, please test the demo web page or go to the official web site.