BS4 Grid System

Rules for the Bootstrap 4 grid system include:

• For correct alignment and padding, rows must be inserted into a .container (fixed-width) or .container-fluid (full-width) container.
• To make horizontal groups of columns, use rows.
• Columns should include content, and only columns that are directly children of rows may do so.
• Grid layouts can be readily created using predefined classes, such as .row and .col-sm-4.
• By using padding, columns produce gutters, or spaces between column content. Negative margin on .rows is used to counteract that padding in rows for the first and last column.
• You can create grid columns by indicating how many of the twelve available columns you want to span. Three equal columns, for instance, would require three .col-sm-4.
• Column widths are always flexible and sized in relation to their parent element since they are expressed as percentages.
• The primary difference between Bootstrap 3 and Bootstrap 4 is that the latter now makes use of flexbox rather of floats. Flexbox has the significant benefit of automatically arranging grid columns without a defined width as “equal width columns” (and equal height). For instance, three components with the .col-sm suffix will all be automatically 33.33% wide when viewed from the small breakpoint upwards. Advice: Have a look at our CSS Flexbox Tutorial to understand more about Flexbox.

Note that IE9 and older versions do not support Flexbox.

Use Bootstrap 3 if you need to support IE8–9. It is the most stable version of Bootstrap, and the team continues to maintain it with important updates to the documentation and bug fixes. It won’t, however, get any new features.