I've been running into some issues with Bootstrap's Grid on different devices. According to Bootstrap's documentation, column sizes in HTML are dependent on the device's window size. E.g.:
Extra small 576px , Small >= 768px , Medium >= 992px , Large >=1200px
However, in what should be considered a medium device (a rotated iPad that is 1024 x 768 on Google Chrome's Developer Tools) is being considered a Large Device by Bootstrap. My code looks like this:
<div class="col-lg-2 col-md-4 col-sm-4">
In landscape rotation, the iPad had the div at column size 2, which shouldn't be happening. I did a console log test to ensure the screen size, and it was indeed found to be 1024px. Any ideas why this might be happening?
The problem is that your math is slightly out of line with how Bootstrap calculates their breakpoint, confusing the large breakpoint (
>= 992px) with the extra large breakpoint (
While your iPad doesn't fall into the extra large breakpoint (which uses the selector
.col-xl-), it does fall into the large breakpoint, and the
.col-xl-2 class is correctly applied.
See the following image for a handy list of breakpoints and their corresponding classes: