Table of Contents

Bootstrap 4 – Grid System

”;

Description

Bootstrap 4 grid system built with flexbox which is fully responsive and scales up to 12 columns (according to the size of device) by creating layout with rows and columns across the page. It provides responsive, mobile first fluid grid system which scales the columns as the device or viewport size increases.

Working of Grid System

Rows must be placed within a .container class for proper alignment and padding.
For responsive width use .container class and for fixed width across all viewport, use the .container-fluid class.
Use rows to create horizontal groups of columns.
Content should be placed within the columns, and only columns may be the immediate children of rows.
Columns contain padding for controlling the space between them.
If you place more than 12 columns in a row, then the columns will be placed in a new line.
Columns create gaps between column content via padding. Therefore, you can remove the margin from rows and padding from columns with .no-gutters class on the row.
You can make grid system responsive by using five grid breakpoints such as extra small, small, medium, large, and extra large.
Predefined grid classes like .col-4 are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.

Grid Options

The following table summarizes aspects of how Bootstrap 4 grid system works across multiple devices −

	Extra small devices (<576px)	Small devices (≥576px)	Medium devices (≥768px)	Large devices (≥992px)	Extra Large devices (≥1200px)
Grid behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints	Collapsed to start, horizontal above breakpoints	Collapsed to start, horizontal above breakpoints	Collapsed to start, horizontal above breakpoints
Max container width	None (auto)	540px	720px	960px	1140px
Class classes	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-
# of columns	12	12	12	12	12
Gutter width	30px (15px on each side of a column)	30px (15px on each side of a column)	30px (15px on each side of a column)	30px (15px on each side of a column)	30px (15px on each side of a column)
Nestable	Yes	Yes	Yes	Yes	Yes
Column ordering	Yes	Yes	Yes	Yes	Yes

Basic Grid Structure

Following is basic structure of Bootstrap 4 grid −

<div class = "container">
   <div class = "row">
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>
   </div>
   
   <div class = "row">
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>
      <div class = "col-*-*"></div>	  
   </div>
   
   <div class = "row">...</div>
</div>

Example of Grid System

Following is an example of Bootstrap 4 grid system −