Bootstrap 4 Grid System

The bootstrap 4 grid system is used to create a responsive website layout. The bootstrap 4 offers a mobile-first flexbox grid system that allows you to divide the viewport or screen into 12 columns. It also provides predefined Bootstrap grid classes that help to make a grid very quickly for devices such as cell phones, tablets, laptops, etc.

The bootstrap 4 grid system also arranges the columns and the content inside the column automatically according to the screen size.

Grid Classes

  • .col-* = This class is used to create grid layout (columns) on extra small devices having screen width less than 576 px.
  • .col-sm-* = This class is used to create grid layout (columns) on small devices having screen width equal to or greater than 576 px.
  • .col-md-* = This class is used to create grid layout (columns) on medium devices having screen width equal to or greater than 768 px.
  • .col-lg-* = This class is used to create grid layout (columns) on large devices having screen width equal to or greater than 992 px.
  • .col-xl-* = This class is used to create grid layout (columns) on extra-large devices having screen width equal to or greater than 1200 px.

Grid System Rules

  • The rows should be placed inside the .container class for fixed width or .container-fluid class for full width to provide proper alignment or padding to the content.
  • Use .row class to make a group of columns.
  • All the content must be placed in the columns only. The columns are the immediate children of row.
  • The .row class and .col-sm/md/lg-* class are used to create a quick grid layout. Where, * = 1 to 12.
  • The columns create a gap between column content through padding. That padding acts as an offset in rows for the first and last column by providing a negative margin to the rows.
  • To create a grid column, you need to specify the number of columns you want to create.
  • The column widths are always specified in percentage.
  • The main difference between the bootstrap 3 and bootstrap 4 is that Bootstrap 4 uses flexbox instead of floats that are used in bootstrap 3.

Basic Structure of Bootstrap 4 Grid System

Output:

Bootstrap 4 Grid System

Grid Options

 Extra Small (<576px)Small (>=576px)Medium (>=768px)Large (>=992px)Extra Large (>=1200px)
Class prefix.col-.col-sm-.col-md-.col-lg-.col-xl-
Grid BehaviourAlways HorizontalCollapsed to start, horizontal above breakpointsCollapsed to start, horizontal above breakpointsCollapsed to start, horizontal above breakpointsCollapsed to start, horizontal above breakpoints
Container WidthNone (auto)540px720px960px1140px
Suitable forPortrait phonesLandscape phonesTabletsLaptopsLaptops and Desktops
# of columns1212121212
Gutter with30px (15px on both sides of column)30px (15px on both sides of column)30px (15px on both sides of column)30px (15px on both sides of column)30px (15px on both sides of column)
NestableYesYesYesYesYes
OffsetsYesYesYesYesYes
Column OrderingYesYesYesYesYes

Pin It on Pinterest

Share This