Bootstrap - Get current screen mode

Question

Is it possible to get the current screen mode without having to code a function which works with media queries?

e.g. I have a container-fluid div with class chartContainer.

.chartContainer {
    padding-top: 20px;
    padding-bottom: 50px;
    padding-left: 120px;
    padding-right: 120px;
}

But I only need the class chartContainer if the screen size is not xs or sm.

Are there bootstrap methods to find this out, without having to code own functions?

e.g. I would do something like this, which is quick and dirty but should work if the window size changes:

setInterval(function() {
    if (BOOTSTRAP_CURRENT_SCREEN_MODE == 'xs' || BOOTSTRAP_CURRENT_SCREEN_MODE == 'sm') {
        $(".container-fluid").removeClass("chartContainer");
    } else {
        $(".container-fluid").addClass("chartContainer");
    }
},100);

Is there something like BOOTSTRAP_CURRENT_SCREEN_MODE? How would I achieve my goal the best way?

related : https://stackoverflow.com/questions/18575582/how-to-detect-responsive-breakpoints-of-twitter-bootstrap-3-using-javascript — Taki, Apr 23 '18 at 14:36
I already told that I try to not use media queries in my first sentence. — Black, Apr 23 '18 at 15:02

score 2 · Answer 1 · answered Apr 23 '18 at 14:42

Media queries are the easiest way to do this.

/* col-md-* and col-lg-* */

@media (min-width: 992px) {
  .chartContainer {
    padding-top: 20px;
    padding-bottom: 50px;
    padding-left: 120px;
    padding-right: 120px;
  }
}


/* col-xs-* and col-sm-* */

@media (max-width: 991px) {
  .chartContainer {
    /* some other measurements here */
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

<div class="chartContainer">...</div>

Ok, I think this is the best way and javascript solutions would be dirty and inefficient. Thanks! — Black, Apr 23 '18 at 15:05

score 1 · Answer 2 · answered Apr 23 '18 at 15:05

if you want to get bootstrap's breakpoints in JS , use this :

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

repeat that for the other breakpoints and tweak it to your needs,

here's a list of the Availbale variables ( custom properties )

Media queries would be better , you can use it like :

@media (min-width: var(--breakpoint-lg) ) { ...

Bootstrap - Get current screen mode

2 Answers2