CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
NoobSter
NoobSter

Reputation: 1160

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

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.

Upvotes: 29

Views: 42433

Answers (3)

muneeb_mughal
muneeb_mughal

Reputation: 81

Updated for Bootstrap v5.0

Here's a list of updated grid sizes for Bootstrap5

  • xs < 576px
  • sm ≥ 576px
  • md ≥ 768px
  • lg ≥ 992px
  • xl ≥ 1200px
  • xxl ≥ 1400px

See Bootstrap5 grid options

Upvotes: 1

Michael Iyke
Michael Iyke

Reputation: 409

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/

Upvotes: 0

moodyjive
moodyjive

Reputation: 1807

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

Upvotes: 57

Related Questions