Change bootstrap class if device is getting rotated

2335 views javascript
7

Is it possible to detect if the device is rotated horizontally or vertically and change the bootstrap class accordingly?

This is how it looks like if the device is rotated vertically:

vertically rotated

Everything looks fine, bootstrap class col-xs-12 is used.

But if the user rotates the device horizontally, then there is alot of whitespace:

horizontally rotated

I want to use this whitespace and change col-xs-12 to col-xs-6 in this case, so that 2 containers are showing side by side.

Is this possible with bootstrap, or do I have to use javascript?

answered question

I don't think that's possible with bootstrap, you can't "detect" without using JS.

1 Answer

7

You shouldn't change classes, you should modify the selected class based on the orientation.

/* portrait */
@media screen and (orientation:portrait) {
  /* portrait-specific styles */
  .classYouWantToChange { 
     background: blue;
  }
}
/* landscape */
@media screen and (orientation:landscape) {
   /* landscape-specific styles */
  .classYouWantToChange { 
     background: black;
  }
}

As you can see in the code above, we're overwriting the class classYouWantToChange based on device orientation

posted this

Have an answer?

JD

Please login first before posting an answer.