-
-
Notifications
You must be signed in to change notification settings - Fork 78.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature Request: Find current breakpoint with Javascript #25124
Comments
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? |
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 |
@Herst If the breakpoints change i can detect current breakpoint wiht jQuery .resize() handler. For exampe:
An example of where we can use: I want to set li > a
|
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? |
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 |
Closing out though—no plans to add this ourselves. |
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 |
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. |
@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: 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 :) |
Hi @alixbergeret that's because 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. |
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: In your JS:
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. |
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 }
The text was updated successfully, but these errors were encountered: