Tuesday, February 18, 2025
HomejQueryDetect Bootstrap Breakpoints Utilizing JavaScript - bs-breakpoints

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.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments