Bootstrap HTML - Medium Sized Device Registers as Large

3223 views html
9

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?

answered question

1 Answer

11

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 (>= 1200px).

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:

enter image description here

posted this

Have an answer?

JD

Please login first before posting an answer.