Skip to content
GitLab

Bootstrap 5 grid

Merged Administrator requested to merge master-mc-simplify-grid into master

Created by: MartijnCuppens

Set gutter width in rem instead of px

The gutter width is now 1.5rem instead of 30px. This way we 'll be able to use the spacing utilities to align things with the grid.

The container paddings are now set to 1rem.

Fixes #27072 (closed)

Change approach on how column paddings are set

The col classes were extended lead to this list of 60 selectors in v4. By using .row > *, we can simplify this a lot. This change will apply paddings to all children of .row. Specificity won't be influenced by this change.

Columns: switch to width instead of flex-basis and max-width

Just using width has the benefit the .col-* classes can be used without the need of a .row class. This is also how the primer works.

This also provides a solution for sizing utilities https://github.com/twbs/bootstrap/issues/21943. Because we only set paddings to direct children of .rows, the cols won't have any padding whenever they're not in a .row.

Closes #28312 (closed) Closes https://github.com/twbs/bootstrap/issues/29505

More control over gutter widths & vertical gutters

This PR introduces new responsive gutter classes. There are 3 types of gutter classes available:

  • gx-* classes control the horizontal/column gutter width
  • gy-* classes control the vertical/row gutter width
  • g-* classes control the horizontal & vertical gutter width

These gutter classes can be added to the .row and influence the negative margins on the row and the padding on the columns.

Responsive variants are also available to get control per breakpoint. With this change we might consider ditching (or disable by default) the negative margins which increase our file size quite a lot.

How do the gutters work?

The way the gutters are set in horizontal direction is kept the same as in v4 (negative margins on the row and paddings on the columns). The vertical gutters work a little different. Margin is added to the top of each column and to counteract the top margin, a negative margin is added to the row. We use margins instead of paddings to prevent overlapping issues (like we have with the horizontal paddings).

New .row-cols-auto

Fixes https://github.com/twbs/bootstrap/issues/29866

Removal of .form-row

.form-rows had a smaller gutter width, but since we now have the gutter classes, we can use them for even more control over the gutter widths.

Removal of .form-inline

.form-inline is removed in favor of the more flexible grid. The children can now be wrapped in .col-md-auto divs when needed. With the gutter classes, we can have easier control over the vertical spacing instead of using the responsive margin utilities.

Remove position: relative from cols

Closes #25254 (closed) Closes #26512 (closed)

Removal of card decks

We currently have as well card decks as the grid system, but our grid offers more responsive control, so there's not really a reason to keep the decks.

Remove global box-sizing reset from bootstrap-grid.css

In bootstrap-grid.css, box-sizing was inherited which introduces this issue: https://github.com/twbs/bootstrap/issues/22872. On the other hand, setting the global box-sizing behaviour can introduce unexpected behaviour for custom CSS. By only adding box-sizing to the columns, we only apply the box-sizing to the elements where it's needed.

Examples

To do:

  • Change default gutter width to 1.5rem
  • Change gutter classes
  • Document breaking changes
  • Update grid documentation
  • Document stand alone .col-* utility classes
  • Update examples
  • .form-inline & .form-row are removed, document it
  • Update stretched link documentation (assumes col has position: relative)
  • Cleanup git