Bootstrap 4 Javascript AJAX jQuery HTML PHP Example MORE

How to Grid System in Bootstrap 4

❮ Previous Next ❯

Grid Classes

The Bootstrap 4 grid system has five classes:

  • .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)

Three Equal Columns

The following example shows how to create three equal-width columns, on all devices and screen widths:

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap three equal width columns 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.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Three equal width columns</h1>
  <p>Note: Try to add a new div with class="col" inside the row class - this will create three equal-width columns.</p>
  <div class="row">
    <div class="col" style="background-color:lavender;">4</div>
    <div class="col" style="background-color:green;">4</div>
    <div class="col" style="background-color:lavender;">4</div>
  </div>
</div>

</body>
</html>
Run it Yourself »

Responsive Columns

The following example shows how to create four equal-width columns starting at tablets and scaling to extra large desktops. On mobile phones or screens that are less than 576px wide, the columns will automatically stack on top of each other:

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Responsive Columns 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.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Responsive Columns</h1>
  <p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
  <div class="row">
    <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:lavender;">.col-sm-3</div>
    <div class="col-sm-3" style="background-color:lavenderblush;">.col-sm-3</div>
  </div>
</div>

</body>
</html>
Run it Yourself »

Two Unequal Responsive Columns

Other utilities, such as borders and colors, are also often used together with containers:

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap two Unequal Responsive Columns 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.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Two Unequal Responsive Columns</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 576px wide.</p>
  <div class="row">
    <div class="col-sm-5" style="background-color:lavender;">.col-sm-5</div>
    <div class="col-sm-7" style="background-color:lavenderblush;">.col-sm-7</div>
  </div>
</div>
    
</body>
</html>
Run it Yourself »
❮ Previous Next ❯