Grid System Rules

Some Bootstrap 4 grid system rules:

• Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding

• Use rows to create horizontal groups of columns

• Content should be placed within columns, and only columns may be immediate children of rows

• Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts

• Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows

• Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4

• Column widths are in percentage, so they are always fluid and sized relative to their parent element

• The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 now uses flexbox, instead of floats. One big advantage with flexbox is that grid columns without a specified width will automatically layout as "equal width columns" (and equal height). Example: Three elements with .col-sm will each automatically be 33.33% wide from the small breakpoint and up.