This is a JavaScript variant of the BS4 SCSS mixins and BS5 SCSS mixinsmedia-breakpoint-up, media-breakpoint-down, media-breakpoint-between and media-breakpoint-only.
See also BS4 Responsive Breakpoints or BS5 Responsive Breakpoints.
Works with Bootstrap 4 and 5.
Available at NPM
$ npm i bootstrap-breakpointJavaScript (bootstrap-breakpoint.js)
// bootstrapBreakpoint(mode, breakpoint);// mode = up, down, between or only// breakpoint = xs, sm, md, lg, xl or xxlif(bootstrapBreakpoint('up','md')){// code if window width is greater equal than md}if(bootstrapBreakpoint('down','lg')){// code if window width is lower than lg}if(bootstrapBreakpoint('between',['sm','lg'])){// code if window width is greater equal sm and lower than lg}if(bootstrapBreakpoint('only','xs')){// code if window width is in range of xs}// adding further breakpointsBootstrapBreakpoint.breakpoints.push('xxl');BootstrapBreakpoint.init();// or BootstrapBreakpoint.breakpoints=["xs","sm","md","lg","xl","xxl"];BootstrapBreakpoint.init();