CODEWITHSUNDEEP
javascripttwitter-bootstrap
Black
Black

Reputation: 20312

Bootstrap - Get current screen mode

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?

Upvotes: 0

Views: 402

Answers (2)

Taki
Taki

Reputation: 17654

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) ) { ...

Upvotes: 1

J. Titus
J. Titus

Reputation: 9690

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>

Upvotes: 2

Related Questions