Does Bootstrap detect device orientation as well as viewport size?

Hi
Can anyone tell me does bootstrap differentiate between orientations on different device sizes. What I mean is, does bootstrap apply the same ‘stacking’ of rows and columns based purely on device size or is it possible that you could have for example a 2 column display on a mobile landscape but single column mobile portrait. I guess what i mean is the pixel sizes for the breakpoints - are they device specific or device/orientation dependent?
Cheers

Orientation media queries don’t make sense any more. My old phone on landscape is narrower than modern phones in portrait. There are just too many devices around at different sizes for this approach to work.

All you are really interested in is the width available for your design. If a design needs two columns at a certain width then it doesn’t matter which way around your phone is. All that matters is the width available and that can be done with normal media queries irrespective of device.

Bootstrap uses defined widths for its breakpoints based on some historical data but they don’t really equate to modern devices but that doesn’t really matter. You can read their methodology here and see the breakpoints they use. The problem with bootstrap is that it forces you to think in terms of the grid rather than on the needs of the design.

The best approach is to forget about breakpoints and forget about devices and tailor your media queries to the needs of your design. Obviously this is not the bootstrap approach because bootstrap knows nothing about your design and therefore uses the predefined breakpoint approach.

2 Likes