bootstrap breakpoints... need some clarification ' xs sm md lg'

Question

So.. looking online, I see some recent articles stating that the xs breakpoint is 480px and below.. others.. state 767 and below..

I had the understanding (probably not correct) that xs was for phones (480px and below), .col-sm is for tablets (480 px to 767px) etc..

However, when I apply .hidden-xs -- it seems to hide where I would expect my tablet view... in the 480px to 767 range...

What am I doing wrong here?

The columns snap to stacking at 480px, but the .hidden features and .col-xs do not seem to change at that screen width.

I'm working with some crazy legacy code, but i'm fairly certain I've upgraded to the latest version of bootstrap.

Answer 1

The xs breakpoint actually handles screens from 767 pixels and below. The breakpoint widths are as follows:

• xs= 0-767 pixels
• sm = 768-991 pixels
• md = 992-1199 pixels
• lg = 1200 pixels and up

See http://getbootstrap.com/css/#grid

PLEASE NOTE THIS ANSWER IS FOR VERSION 3.0

Answer 2

I just stumbled on this while trying to gain clarity on the same topic, albeit for Bootstrap 4.

• xs= 0 - 575.98 pixels (max-width 575.98) Extra small devices (portrait phones, less than 576px)

• sm = 575.99 - 767.98 pixels (max-width 767.98) Small devices (landscape phones, 576px and up)

• md = 767.99 - 991.98 pixels (max-width 991.98) Medium devices (tablets, 768px and up)

• lg = 991.99 - 1199.98 pixels (max-width 1199.98) Large devices (desktops, 992px and up)

• xl = 1199.99 pixels and up (min-width 1199.99) Extra large devices (large desktops, 1200px and up)

See https://getbootstrap.com/docs/4.0/layout/overview/