Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Bootstrap Breakpoint

This is a JavaScript variant of the SCSS mixins media-breakpoint-up, media-breakpoint-down, media-breakpoint-between and media-breakpoint-only from Bootstrap 4.

See also Responsive Breakpoints.

Works only with Bootstrap 4 and higher.

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 or xl

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