Skip to content
Write JavaScript conditions depending on the Bootstrap breakpoint.
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist/js
example
src/js
.gitignore
LICENSE
README.md
gulpfile.js
package.json

README.md

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

You can’t perform that action at this time.