Bootstrap: Feature Request: Find current breakpoint with Javascript

[Ghost180195]

It would be very useful if we could find out what breakpoint is being displayed at the moment with Javascript.

For example:

if( bootstrapBreakpoint() == "xs" ) { // do something } else { // do something }

[Herst]

I remember this being asked for Bootstrap 3 numerous times, see https://stackoverflow.com/questions/18575582/how-to-detect-responsive-breakpoints-of-twitter-bootstrap-3-using-javascript (the answer https://stackoverflow.com/a/37141090 is even about BS4).

The question is, is this even a good idea to begin with? What if the breakpoints change? Also, why not simply check the visibility/size of a particular element if what you need it for is tied to one?

[patrickhlauke]

fwiw, this can be achieved with something like

var lg = window.getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-lg');
if (window.matchMedia("(min-width: "+lg+")").matches) {
  /* do something */
} else {
  /* do something else */
}

(not exhaustively tested, so ymmv)

[edit: and for reference, it's not possible to use var(--breakpoint-lg) directly in the query tested by matchMedia, as var() is not allowed in that context - hence the slightly awkward acrobatics]

[Ghost180195]

@Herst If the breakpoints change i can detect current breakpoint wiht jQuery .resize() handler.

For exampe:

$( window ).resize(function() { if( bootstrapBreakpoint() == "xs" ) { // do something } else { // do something }; });

An example of where we can use:

I want to set li > a line-height like .navbar-brand image height (whose height is unknown to me
so i can't setline-hiehgt's value in css file) only in lg screen because on other breakpoints navbar is collapsed so line-height value must be 1.5.

$( window ).resize(function() { if (bootstrapBreakpoint() == "lg") { $(".navbar-nav > li > a").css( "line-height", navbarBrandHeight + "px" ); } else { $(".navbar-nav > li > a").css("line-height", "1.5"); } });

[patrickhlauke]

I want to set li > a line-height...

why do you want to do this in JS, when you could simply do it with a few lines of CSS wrapped in a media query?

[mdo]

I imagine there are also other CSS solutions you could explore. For example, if you want an image and text to be vertically centered with one another, you can use flexbox. Set the parent to .d-flex.align-items-center if it isn't already, and have two children elements: <img> and <span>.

[mdo]

Closing out though—no plans to add this ourselves.

[Johann-S]

I don't know if it'll help someone, but I made a plugin which help you to detect what's the current Bootstrap v4 breakpoint, see: https://github.com/Johann-S/bs-breakpoints

[alixbergeret]

I am finding it very surprising that this is not available, and that people seem to be saying "why would you need that". I am finding myself having to refresh a Google Chart graph when the break-point changes, so that the graph fits the new width of its container, and it's really surprising that there isn't a simple was of doing that. You should seriously consider adding it in.

[Johann-S]

@alixbergeret this plugin https://www.npmjs.com/package/bs-breakpoints do exactly what you want

[alixbergeret]

@alixbergeret this plugin https://www.npmjs.com/package/bs-breakpoints do exactly what you want

Hi,

Thank you.

I have tried it, but I can't get it to work. I have used the code extract from the plug-in's page, here:
https://mi-linux.wlv.ac.uk/~in9352/bootstrap/alix.html
Look at line 25 onwards. Nothing in the console. Events don't seem to be detected at all. What am I doing wrong?

Also, it would be nice to have this as standard in Bootstrap, and not to have to include yet another library... but thanks for sharing anyway :)

[Johann-S]

Hi @alixbergeret that's because bsBreakpoints detect jquery and dispatch the events through jQuery system.

See my CodePen based on your code: https://codepen.io/Johann-S/pen/mgJEKB

BTW if you have any issues with bsBreakpoints you can post an issue here: https://github.com/Johann-S/bs-breakpoints/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc

[alixbergeret]

Hi @alixbergeret that's because bsBreakpoints detect jquery and dispatch the events through jQuery system.

See my CodePen based on your code: https://codepen.io/Johann-S/pen/mgJEKB

BTW if you have any issues with bsBreakpoints you can post an issue here: https://github.com/Johann-S/bs-breakpoints/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc

Brilliant, that worked. Sorry I didn't realise you couldn't detect the events both ways. I can now redraw my Google Charts on breakpoint change, meaning they always fit their container :) thanks for taking the time.

[CttCJim]

I've been looking at solutions for this and they are all very convoluted. If you are using JQuery, it's pretty simple.

In your HTML:
<div id="visXS" class="visible-xs"></div> \<div id="visSM" class="visible-sm"></div> \<div id="visMD" class="visible-md"></div> \<div id="visLG" class="visible-lg"></div> \<div id="visXS" class="visible-xl"></div>
(remove all "\" from the above; this comment box doesnt like HTML.)

In your JS:
function getSize() { if($("#visXS").is(":visible")) {return "xs"} if($("#visSM").is(":visible")) {return "sm"} if($("#visMD").is(":visible")) {return "md"} if($("#visLG").is(":visible")) {return "lg"} if($("#visXL").is(":visible")) {return "xl"} }

window.onresize = (function() { console.log(getSize()); });

I find it remarkable how many people say "why would you want your JS to do this when your CSS can?" Guys, it's his business why. I wanted it so I could make my bootstrapTable3 toggle views automatically in SM/XS. Can't do that in CSS.