Bootstrap Breakpoint

This is a JavaScript variant of the BS4 SCSS mixins and BS5 SCSS mixins media-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-breakpoint

Example

JavaScript (bootstrap-breakpoint.js)

// bootstrapBreakpoint(mode, breakpoint);
// mode = up, down, between or only
// breakpoint = xs, sm, md, lg, xl or xxl

if (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 breakpoints
BootstrapBreakpoint.breakpoints.push('xxl');
BootstrapBreakpoint.init();
// or 
BootstrapBreakpoint.breakpoints = ["xs", "sm", "md", "lg", "xl", "xxl"];
BootstrapBreakpoint.init();

Examples

• HTML
• JavaScript