are bootstrap grid breakpoints usually just enough, or is it more common to make other breakpoints?

Question

The grid system as I understand

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

so, don't you guys feel like the xs class is completely not small and definitely not extra. I'm thinking of making a tiny breakpoint, and want to know is it common to do this or is there something I'm not getting right!! and what is the easiest way to do this?

Answer 1

See Bootstrap 4: http://getbootstrap.com/docs/4.0/layout/grid/

They change the breakpoints to

• Extra small: <576px
• Small: ≥576px
• Medium: ≥768px
• Large: ≥992px
• Extra large: ≥1200px

So I think the XS breakpoint was to wide.

Answer 2

Just add a media query in your custom css file for a max screen size of 400 pixels for this. I do that quite often. Especially for old iPhones, which render HTML at a width of 350 pixels.

@media screen and (max-width: 400px) {
  ...
}