Change bootstrap class if device is getting rotated

2335 views javascript

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


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?


Please login first before posting an answer.