Twitter Bootstrap Question posted in

In Twitter Bootstrap is there a way to detect the screen width (xs,sm,md,lg) without using media queries?

Say I want my footer to be orange for XS resolutions.

I can of course write a media query to do this.

@media (max-width:767px) {
 .footer {
   background-color:orange;  
 } 
}

But this is kind of cumbersome. It would be nice if there was another way of doing this without using a media query?

Say a bootstrap option of “enable breakpoint wrappers”. This would use js to apply say wrapper-sm or wrapper-lg to the body tag which I could use as a descender.

eg

.wrapper-sm .footer {
  background-color:orange;  
}

Does such a mechanism or something similar exist?

If not, is there a clever way to facilitate this with LESS (or js)?

Tags:

2

Answers


  1. 0

    …or you can write your own classes inside media queries and use those instead, for example:

    @media (max-width:767px) {
  .wrapper-sm {
    background-color:orange;
  }
}

    …and then simply apply it on your class as you asked for.

    ..and do the same for the other classes.

    Login or Signup to reply.
  2. 0

    Is it possible to write a wrapper for it, but why would you do that?
    I want to recommend SASS if it is because of your overview. You can use multiple files for different screen-sizes.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search