The Grid

Although a lot of designers have moved to CSS grid, the Bootstrap grid, which is mostly written in Flexbox is an extremely popular part of Bootstrap. Let's take a look at the important changes.

XXL Breakpoint

Try it

There's a new breakpoint in town, it's called the XXL breakpoint. With screens getting larger and larger, I really like this change. I often felt like the maximum of 1200 pixels was a bit short.

All of the other breakpoints have been left alone.

Row Gutters

• Improved Sizing
• g{-DIR}-{SIZ}
  • DIR:
    x y
  • SIZ:
    0 1 2 3 4 5
• no-gutter Removed

Try it

Gutters are now set in REMs and are a bit narrower than before at about 24 pixels wide instead of the older 30. This makes things a bit easier to align with the newer spacing utilities.

There is also a new gutter class you can use to really control how these look.

Since there is a new gutter class, the no-gutter class has been removed, so make sure you look for it and update it to the new g classes.

Order

• Removed Some Classes
• order{-BR}{-AMT}
  • BR:
    sm md lg xl xxl
  • AMT:
    first 0 1 2 3 4 5 last

Try it

In the old version of bootstrap, there were a lot of order classes that nobody really ever used, so in this new version, there are only five different order classes. They should be more than plenty for your needs.

The order classes let you reorder elements differently than in their natural order. They act more like horizontal layers, so if we have two elements with an order of last, they will be drawn next to each other with the one that is coded first in the first position. You can use these classes to re-order items.