Bootstrap 4 Grid System

In this article, we will learn about the bootstrap 4 grid system in detail with the help of various examples.

What do you mean by bootstrap 4 grid system?

In Bootstrap 4 grid system is responsive. In a grid system, columns will re-arrange depending on the screen size, i.e., small, large, and extra small, and extra-large. On a big screen, i.e., the desktop and the laptop screen, it might look better with the content organized in three columns, but on a small screen, i.e., tablets, phones, etc., it would be better if the content items were stacked on top of each other.

Bootstrap 4 Grid Classes

The Bootstrap 4 grid system has five classes:

.col- This class is used for extra small devices in which screen width is less than 576px, and the number of columns is 12. This class has horizontal behavior and is suitable for portrait phones. In this container width is none.
.col-sm- This class is used for small devices with screen width equal to or greater than 576px, and the number of columns is 12. This class has collapsed to start, above horizontal breakpoints, and is suitable for landscape phones. In this container width is 540px.
.col-md- This class is used for medium devices in which screen width is equal to or greater than 768px, and the number of columns is 12. This class has collapsed to start, above horizontal breakpoints, and is suitable for tablets. In this container width is 720px.
.col-lg- This class is used for large devices in which screen width is equal to or greater than 992px, and the number of columns is 12. This class has collapsed to start, above horizontal breakpoints, and is suitable for laptops. In this container width is 960px.
.col-xl- This class is used for xlarge devices in which screen width equals or greater than 1200px, and the number of columns is 12. This class has collapsed to start, above horizontal breakpoints, and is suitable for laptops and desktops. In this container width is 1140px.

Let's take the various example of the bootstrap 4 grid system.

Example 1:

<! DOCTYPE html>          
<html lang="en">          
<head>          
  <title> Bootstrap 4 Image thumbnail Example </title>          
  <meta charset="utf-8">          
  <meta name="viewport" content="width=device-width, initial-scale=1">          
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">          
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>          
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>          
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script>          
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">    
      <title> Bootstrap 4 Basic Grid Structure Example </title>
	  </head>
      <style>
         .grid_system  div[class^="col"] {
            border: 1px solid white;
            background: #e4dcdc;
            text-align: center;
            padding-top: 5px;
            padding-bottom: 5px
         }	
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@900&display=swap");
.heading h1 {
  text-align: center;
  color: #222; 
  font-size: 40px; 
  font-weight: 400;
  text-transform: uppercase;
  word-spacing: 1px; 
  letter-spacing: 2px; 
  color: black;
  margin: 20px;
  font-family: "Rubik", sans-serif;
}
.heading h1 span {
  line-height: 2em; 
  padding-bottom :15px;
  text-transform: none;
  font-size: .7em;
  margin: 20px;
  font-weight: normal;
  font-style: italic; 
  font-family: "Rubik", sans-serif;
  color: #999; 
 letter-spacing: -0.005em; 
  word-spacing: 1px;
}
.heading h1:after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 45px;
  height: 4px;
  content: "";
  right: 45px; 
  margin: auto;
  background-color: #ccc;
}
heading h1:before {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 45px;
  height: 4px;
  content: "";
  right: 45px; 
  margin: auto;
  background-color: #ccc;
}
.heading h1:before { 
background-color: #d78b8b;
  left: 45px; 
  width: 90px;
}
   body {
  color: #fff;
  font-family: 'Raleway';
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 1px;
  height: 100vh;
  margin: 0;
  text-transform: uppercase;
}
.gradient-background {
  background: linear-gradient(100deg,#200c32,#e74d89,#febaa6);
  background-size: 180% 180%;
  animation: gradient-animation 9s ease infinite;
}
@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
h1 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
h1 span {
  display: block;
  font-size: 0.5em;
  line-height: 1.3;
}
      </style>
   <body class="gradient-background">
	<center>
<div class = "heading">
  <h1> Example
    <span> Bootstrap 4 Basic Grid Structure
 </span>
  </h1>
</div>
      <div class = "grid_system">
         <div class = "row">
            <div class = "col-sm-1"> .col-sm-1 </div>
            <div class = "col-sm-1"> .col-sm-1 </div>
            <div class = "col-sm-1"> .col-sm-1 </div>
            <div class = "col-sm-1"> .col-sm-1 </div>
            <div class = "col-sm-1"> .col-sm-1 </div>
            <div class = "col-sm-1"> .col-sm-1 </div>
            <div class = "col-sm-1"> .col-sm-1 </div>
            <div class = "col-sm-1"> .col-sm-1 </div>
            <div class = "col-sm-1"> .col-sm-1 </div>
            <div class = "col-sm-1"> .col-sm-1 </div>
            <div class = "col-sm-1"> .col-sm-1 </div>
            <div class = "col-sm-1"> .col-sm-1 </div>
         </div>
         <div class = "row">
            <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>
         </div>
                  <div class = "row">
            <div class = "col-sm-4"> .col-sm-4 </div>
            <div class = "col-sm-4"> .col-sm-4 </div>
            <div class = "col-sm-4"> .col-sm-4 </div>
         </div>
         <div class = "row">
            <div class =" col-sm-3"> .col-sm-3 </div>
            <div class = "col-sm-3"> .col-sm-3 </div>
            <div class = "col-sm-6"> .col-sm-6 </div>
         </div>
             <div class = "row">
            <div class = "col-sm-5"> .col-sm-5 </div>
            <div class = "col-sm-7"> .col-sm-7 </div>
         </div>
            <div class = "row">
            <div class = "col-sm-6"> .col-sm-6 </div>
            <div class = "col-sm-6"> .col-sm-6 </div>
         </div>
                  <div class = "row">
            <div class = "col-sm-12"> .col-sm-12 </div>
         </div>
      </div>
   </body>
</html>

Explanation:

In the above example, we have created an example of bootstrap 4 basic grid structure.

Output:

Following is the output of this example.

Example 2:

<! DOCTYPE html>          
<html lang="en">          
<head>          
  <title> Bootstrap 4 two column layout strcture Example </title>          
  <meta charset="utf-8">          
  <meta name="viewport" content="width=device-width, initial-scale=1">          
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">          
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>          
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> </script>          
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> </script>          
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">    
	  </head>
      <style>
         .grid_system  div[class^="col"] {
            border: 1px solid white;
            text-align: center;
            padding-top: 5px;
            padding-bottom: 5px
         }
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@900&display=swap");
.heading h1 {
  text-align: center;
  color: #222; 
  font-size: 40px; 
  font-weight: 400;
  text-transform: uppercase;
  word-spacing: 1px; 
  letter-spacing: 2px; 
  color: black;
  margin: 20px;
  font-family: "Rubik", sans-serif;
}
.heading h1 span {
  line-height: 2em; 
  padding-bottom :15px;
  text-transform: none;
  font-size: .7em;
  margin: 20px;
  font-weight: normal;
  font-style: italic; 
  font-family: "Rubik", sans-serif;
  color: #999; 
 letter-spacing: -0.005em; 
  word-spacing: 1px;
}
.heading h1:after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 45px;
  height: 4px;
  content: "";
  right: 45px; 
  margin: auto;
  background-color: #ccc;
}
heading h1:before {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 45px;
  height: 4px;
  content: "";
  right: 45px; 
  margin: auto;
  background-color: #ccc;
}
.heading h1:before { 
background-color: #d78b8b;
  left: 45px; 
  width: 90px;
}
   body {
  color: #fff;
  font-family: 'Raleway';
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 1px;
  height: 100vh;
  margin: 0;
  text-transform: uppercase;
}
.gradient-background {
  background: linear-gradient(100deg,#200c32,#e74d89,#febaa6);
  background-size: 180% 180%;
  animation: gradient-animation 9s ease infinite;
}
@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
h1 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
h1 span {
  display: block;
  font-size: 0.5em;
  line-height: 1.3;
}
      </style>
     <body class="gradient-background">
	<center>
<div class="heading">
  <h1> Example
    <span> Bootstrap 4 Two Column Layout Structure
 </span>
  </h1>
</div>
      <body>
      <div class = "grid_system">
         <div class = "row">
            <div class = "col-sm-6"> .col-sm-6 </div>
            <div class = "col-sm-6"> .col-sm-6 </div>
         </div>
                  <div class = "row">
            <div class = "col-sm-7"> .col-sm-7 </div>
            <div class = "col-sm-5"> .col-sm-5 </div>
         </div>
                  <div class = "row">
            <div class = "col-sm-4"> .col-sm-4 </div>
            <div class = "col-sm-8"> .col-sm-8 </div>
         </div>
         <div class = "row">
            <div class = "col-sm-9"> .col-sm-9 </div>
            <div class = "col-sm-3"> .col-sm-3 </div>
         </div>
      </div>
      </script>
   </body>
</html>

Explanation:

In the above example, we have created an example of bootstrap 4 grid two column layout structure. In this for creating a two column layout structure we created a 1 group of .col-sm 6 and .col-sm 6,, one group of .col-sm 5 and .col-sm 7, one group of .col-sm 4 and .col-sm 8, and last one group of .col-sm 9 and .col-sm 3.

Output:

Following is the output of this example.

Example 3:

<! DOCTYPE html>  
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1, shrink-to-fit = no">
      <link rel = "stylesheet" 
         href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
         integrity = "sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
         crossorigin = "anonymous">
      <title> Bootstrap 4 Three Column Layout Structure </title>
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
         crossorigin = "anonymous">
      </script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" 
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" 
         crossorigin = "anonymous">
      </script>
            <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" 
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" 
         crossorigin = "anonymous">
      </script>
	  </head>
      <style>
         .grid_system  div[class^="col"] {
            border: 1px solid white;
                    text-align: center;
            padding-top: 5px;
            padding-bottom: 5px
         }
	@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@900&display=swap");
.heading h1 {
  text-align: center;
  color: #222; 
  font-size: 40px; 
  font-weight: 400;
  text-transform: uppercase;
  word-spacing: 1px; 
  letter-spacing: 2px; 
  color: black;
  margin: 20px;
  font-family: "Rubik", sans-serif;
}
.heading h1 span {
  line-height: 2em; 
  padding-bottom :15px;
  text-transform: none;
  font-size: .7em;
  margin: 20px;
  font-weight: normal;
  font-style: italic; 
  font-family: "Rubik", sans-serif;
  color: #999; 
 letter-spacing: -0.005em; 
  word-spacing: 1px;
}
.heading h1:after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 45px;
  height: 4px;
  content: "";
  right: 45px; 
  margin: auto;
  background-color: #ccc;
}
heading h1:before {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 45px;
  height: 4px;
  content: "";
  right: 45px; 
  margin: auto;
  background-color: #ccc;
}
.heading h1:before { 
background-color: #d78b8b;
  left: 45px; 
  width: 90px;
}
   body {
  color: #fff;
  font-family: 'Raleway';
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 1px;
  height: 100vh;
  margin: 0;
  text-transform: uppercase;
}
.gradient-background {
  background: linear-gradient(100deg,#200c32,#e74d89,#febaa6);
  background-size: 180% 180%;
  animation: gradient-animation 9s ease infinite;
}
@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
h1 {
  position: relative;
  padding: 0;
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-weight: 300;
  font-size: 40px;
  color: #080808;
  -webkit-transition: all 0.4s ease 0s;
  -o-transition: all 0.4s ease 0s;
  transition: all 0.4s ease 0s;
}
h1 span {
  display: block;
  font-size: 0.5em;
  line-height: 1.3;
}
      </style>
      <body class="gradient-background">
	<center>
<div class="heading">
  <h1> Example
    <span> Bootstrap 4 Three Column Layout Structure
 </span>
  </h1>
</div>
      <body>
      <div class = "grid_system">
         <div class = "row">
            <div class = "col-sm-4"> .col-sm-4 </div>
            <div class = "col-sm-4"> .col-sm-4 </div>
            <div class = "col-sm-4"> .col-sm-4 </div>
         </div>
                  <div class = "row">
            <div class = "col-sm-3"> .col-sm-3 </div>
            <div class = "col-sm-4"> .col-sm-4 </div>
            <div class = "col-sm-5"> .col-sm-5 </div>
         </div>
                  <div class = "row">
            <div class = "col-sm-2"> .col-sm-2 </div>
            <div class = "col-sm-8"> .col-sm-8 </div>
            <div class = "col-sm-2"> .col-sm-2 </div>
         </div>
        <div class = "row">
            <div class = "col-sm-2"> .col-sm-2 </div>
            <div class = "col-sm-3"> .col-sm-3 </div>
            <div class = "col-sm-7"> .col-sm-7 </div>
         </div>
      </div>
         </body>
</html> 

Explanation:

In the above example, we have created an example of bootstrap 4 grid three column layout structure. In this for creating a three column layout structure we created a 1 group of .col-sm 4, .col-sm 4 and .col-sm 4, one group of .col-sm 3, .col-sm 4 and .col-sm 5, one group of .col-sm 2, .col-sm 8 and .col-sm 2, and last one group of .col-sm 2, .col-sm 3 and .col-sm 7.

Output:

Following is the output of this example.