Bootstrap 4 Grid System

Bootstrap provides a responsive, mobile-first streaming grid system. As the screen or viewport size increases, the system will automatically divide into a maximum of 12 columns. We can also define the number of columns according to our needs as below

Bootstrap 4's grid system is responsive, and columns are automatically rearranged based on screen size.

Bootstrap Grid Class

The Bootstrap 4 grid system has the following 5 classes

1. .col- for all devices
2. .col-sm- tablet-screen width equal to or greater than 576px
3. .col-md- desktop monitor-screen width equal to or greater than 768px
4. .col-lg- large desktop monitor-screen width equal to or greater than 992px
5. .col-xl- Large desktop monitor-screen width equal to or greater than 1200px

Bootstrap 4 grid system rules:

• Each line of the grid needs to be placed in a container with the .container(fixed width) or .container-fluid(full screen width) class, so that some outer and inner margins can be automatically set.
• Use rows to create horizontal column groups.
• Content needs to be placed in columns, and only columns can be direct children of a row.
• Pre-defined classes like .row and .col-sm-4 can be used to quickly make grid layouts.
• Columns create gaps between column contents by padding. This gap is set by the negative margin on the .rows class to offset the first and last rows.
• Grid columns are created by spanning the specified 12 columns . For example, to set three equal columns, you need to use three .col-sm-4 to set.
• The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 now uses flexbox instead of floating. One of the great advantages of Flexbox is that grid columns without a specified width are automatically set to equal width and height columns.

The following image summarizes how the Bootstrap grid system works on different devices.



These classes can be used together to create more flexible page layouts.

Bootstrap 4 Grid Examples

The following code is the basic structure of a Bootstrap 4 grid:

<!-- First example: control column width and how to display it on different devices -->
<div class="row">
    ​<div class="col-*-*"></div>
</div>
<div class="row">
    ​<div class="col-*-*"></div>
    ​<div class="col-*-*"></div>
    ​<div class="col-*-*"></div>
</div> ​
<!-- Second example: or let Bootstrap handle layout automatically -->
<div class="row">
    ​<div class="col"></div>
    ​<div class="col"></div>
​</div>

First example: create a row ( ​<div class = "row"> ). Then, add the required columns (set in the .col-*-* classes). The first asterisk (*) indicates the responding device: sm, md, lg or xl, the second asterisk (*) indicates a number, and the numbers on the same line add up to 12. Second example: Don't add numbers to each col , let bootstrap automatically handle the layout, and each column of the same row is equal in width: two "col" , each 50% width. Three "col" each have a width of 33.33%, four "col" each have a width of 25%, and so on. Similarly, you can use .col-sm | md | lg | xl to set the response rule for the column. Next we can look at more advance examples.

Bootstrap auto-layout

Bootstrap auto-layout create equal width columns

<div class="row">
  <div class="col">.col</div>
  <div class="col">.col</div>
  <div class="col">.col</div>
</div>

see this example in action BootStrap 4 Grid System Auto-layout Example

BootStrap Responsive Grid with fixed column

The following examples demonstrate how to create responsive columns of equal width on tablets and larger screens. On mobile devices, when the screen width is less than 576px, the four columns will be stacked on top of each other :

<div class="col-sm-3">.col-sm-3</div>
<div ​class="col-sm-3">.col-sm-3</div>
<div ​class="col-sm-3">.col-sm-3</div>
<div ​class="col-sm-3">.col-sm-3</div>

see this example in action Responsive Grid with fixed column

Unequal width Responsive Columns

The following example demonstrates creating responsive columns of varying widths on tablets and larger screens.

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

Preview example BootStrap 4 Responsive Unequal Columns Example

Bootstrap 4 Offset

The offset column is set by the offset-*-* classes. The first asterisk (*) can be sm, md, lg, xl , which indicates the type of screen device, and the second asterisk (*) can be a number from 1 to 11. To use offsets on large screen displays, use the .offset-md- * classes. These classes increase the left margin of a column by * columns, where * ranges from 1 to 11. For example: .offset-md-4 moves .col-md-4 four columns to the right.

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

see this example Bootstrap 4 Offset Example