https://github.com/codelinered/bootstrap-breakpoint

Write JavaScript conditions depending on the Bootstrap breakpoints
https://github.com/codelinered/bootstrap-breakpoint

bootstrap bootstrap4 breakpoint jquery-plugin plugin vanilla vanilla-javascript vanilla-js

Last synced: 22 days ago
JSON representation

Write JavaScript conditions depending on the Bootstrap breakpoints

• Host: GitHub
• URL: https://github.com/codelinered/bootstrap-breakpoint
• Owner: CodelineRed
• License: mit
• Created: 2018-08-14T14:14:23.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-30T19:41:09.000Z (about 2 years ago)
• Last Synced: 2024-10-06T09:20:27.478Z (3 months ago)
• Topics: bootstrap, bootstrap4, breakpoint, jquery-plugin, plugin, vanilla, vanilla-javascript, vanilla-js
• Language: JavaScript
• Homepage:
• Size: 40 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Bootstrap Breakpoint

This is a JavaScript variant of the [BS4 SCSS mixins](https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss) and [BS5 SCSS mixins](https://github.com/twbs/bootstrap/blob/v530-dev/scss/mixins/_breakpoints.scss) `media-breakpoint-up`, `media-breakpoint-down`, `media-breakpoint-between` and `media-breakpoint-only`.

See also [BS4 Responsive Breakpoints](https://getbootstrap.com/docs/4.6/layout/overview/#responsive-breakpoints) or [BS5 Responsive Breakpoints](https://getbootstrap.com/docs/5.3/layout/breakpoints/#media-queries).

Works with Bootstrap 4 and 5.

## Available at [NPM](https://www.npmjs.com/package/bootstrap-breakpoint)

```bash

$ npm i bootstrap-breakpoint

```

## Example

JavaScript ([bootstrap-breakpoint.js](https://github.com/CodelineRed/bootstrap-breakpoint/blob/master/src/js/bootstrap-breakpoint.js))

```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](https://github.com/CodelineRed/bootstrap-breakpoint/blob/master/example/index.html)

- [JavaScript](https://github.com/CodelineRed/bootstrap-breakpoint/blob/master/example/js/scripts.js)