
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.