Bootstrap V4 Grid System

With the help of bootstrap v4 grid system you to create advanced layouts using containers, rows, and columns. The Bootstrap grid system can have up to 12 columns with 5 default responsive tiers. Bootstrap's grid system is responsive, and the columns will auto arrange depending on the screen size.

The 5 responsive tiers / classes are:

• .col- (extra small devices - screen width less than 576px)
• .col-sm- (small devices - screen width equal to or greater than 576px)
• .col-md- (medium devices - screen width equal to or greater than 768px)
• .col-lg- (large devices - screen width equal to or greater than 992px)
• .col-xl- (xlarge devices - screen width equal to or greater than 1200px)

Basic 2 Columns Grid Structure

<div class="container">
   <div class="row">
      <div class="col">Left column</div>
      <div class="col">Right column</div>
   </div>
</div>

Output

How it works

To create the layout and align content bootstrap's grid system uses a series of containers, rows, and columns.

Containers: As we discuss in the previous article bootstrap v4 provides two container classes, .container and .container-fluid
.container: This provides a responsive fixed width container
.container-fluid: This provides a full width container, spanning the entire width of the viewport

Rows & Columns: rows to create horizontal groups of columns, one row can contain one or more columns. Content should be placed within columns. One row can contain maxim 12 columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins. This way, all the content in your columns is visually aligned down the left side.

You can use multiple class sizes for a given element. For example, you could use class="col-sm-6 col-md-10" to specify 6 columns for small viewports and 10 columns for medium and large viewports.

Variable width content

Use col-{breakpoint}-auto classes to size columns based on the natural width of their content.

Example of a better Grid Structure

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>
 

Output

Vertical Alignment - Top

<div class="container">
<div class="row align-items-start">
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
</div>
</div>

Output

Vertical Alignment - Center

<div class="container">
<div class="row align-items-center">
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
</div>
</div>

Output

Vertical Alignment - Bottom

<div class="container">
<div class="row align-items-end">
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
<div class="col">One of three columns</div>
</div>
</div>

Output

Horizontal Alignment - Left

<div class="container">
<div class="row justify-content-start">
<div class="col-4">One of two columns</div>
<div class="col-4">One of two columns</div>
</div>
</div>

Output

Horizontal Alignment - Center

<div class="container">
<div class="row justify-content-center">
<div class="col-4">One of two columns</div>
<div class="col-4">One of two columns</div>
</div>
</div>

Output

Horizontal Alignment - Right

<div class="container">
<div class="row justify-content-end">
<div class="col-4">One of two columns</div>
<div class="col-4">One of two columns</div>
</div>
</div>

Output

Horizontal Alignment - Around

<div class="container">
<div class="row justify-content-around">
<div class="col-4">One of two columns</div>
<div class="col-4">One of two columns</div>
</div>
</div>

Output

Horizontal Alignment - Between

<div class="container">
<div class="row justify-content-between">
<div class="col-4">One of two columns</div>
<div class="col-4">One of two columns</div>
</div>
</div>

Output