CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstraptwitter-bootstrap-3
Black
Black

Reputation: 20312

Change bootstrap class if device is getting rotated

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?

Upvotes: 1

Views: 695

Answers (1)

gugateider
gugateider

Reputation: 2049

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

Upvotes: 3

Related Questions