Detect Bootstrap 4 Breakpoints Using JavaScript - bs-breakpoints
File Size: | 57.7 KB |
---|---|
Views Total: | 4037 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.
How to use it:
1. Install the bs-breakpoints with NPM.
# 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" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <!-- JavaScript --> <script src="https://unpkg.com/bs-breakpoints/dist/bs-breakpoints.min.js"></script>
4. Initialize the plugin and detect the Bootstrap 4 Breakpoints.
// init bsBreakpoints.init(); // detect bsBreakpoints.detectBreakpoint();
5. Return the current active responsive breakpoint.
bsBreakpoints.getCurrentBreakpoint();
6. Trigger an event when the breakpoint changes.
$(window).on('init.bs.breakpoint', function (e) { // on init }) $(window).on('new.bs.breakpoint', function (e) { // on change })
Changelog:
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.