bootstrap-detect-breakpoint

bootstrap-detect-breakpoint

Detect the current Bootstrap breakpoint in JavaScript.

• Demo Page
• npm Package

Usage

Include the bootstrap-detect-breakpoint.js.

<script src="/src/bootstrap-detect-breakpoint.js"></script>

Get the current breakpoint with

var currentBreakpoint = bootstrapDetectBreakpoint() 

which will return an object with the current breakpoint name and index, like this

{
    "name": "lg",
    "index": 3
}

The index goes from 0 to 5, where 0 is "xs" and 5 is for "xxl".

Works in Bootstrap 4 and Bootstrap 5 from version 5.3

In Bootstrap 5 prior 5.3 there is an issue that the css variables for breakpoints are missing. I already created a pull request, and it will be merged with version 5.3. 🥳

Up to version 5.3, you can use the bootstrap-detect-breakpoint script with Bootstrap 5 by simply adding the following to your scss

:root {
  @each $name, $value in $grid-breakpoints {
    --bs-breakpoint-#{$name}: #{$value};
  }
}