Bootstrap 4 Grid Classes

Bootstrap 4 Grid Classes

Extra-small Grid – In the extra-small grid system class, when you create the grid (columns), the columns will not be stacked on top of each other on extra-small devices having screen size less than 576px and above screen sizes. Add .col-* class so that the columns will not be stacked.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Grid Classes 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.0/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.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>Extra Small Grid</h1>
  <h5>When you resize the browser you will see the effect.</h5>
  <div class="container">
    <div class="row">
      <div class="col-3 bg-success">
       <p>In the extra small grid system class, when you create the grid (columns), the columns will not stacked on top of each other on extra-small devices having screen size less than 576px and above screen sizes. Add .col-* class so that the columns will not stacked.</p>
      </div>
      <div class="col-9 bg-warning">
        <p>In the extra small grid system class, when you create the grid (columns), the columns will not stacked on top of each other on extra-small devices having screen size less than 576px and above screen sizes. Add .col-* class so that the columns will not stacked.</p>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Output

class1.PNG

Small Grid – When you use small grid class, the grid (columns) will not be stacked vertically on screen sizes greater than or equal to 576px and above. To make the grid system that will not be stacked on small screen sizes and above, add .col-sm-* class.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Grid Classes 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.0/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.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>Small Grid</h1>
  <h5>When you resize the browser you will see the effect.</h5>
  <div class="container">
    <div class="row">
      <div class="col-sm-3 bg-success">
       <p>When you use small grid class then the grid (columns) will remains same on the screen sizes greater than or equal to 576px and above.</p>
      </div>
      <div class="col-sm-9 bg-warning">
        <p>When you use small grid class then the grid (columns) will remains same on the screen sizes greater than or equal to 576px and above.</p>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Output

class2.PNG

Medium Grid – In the medium grid, when you create columns (grid), then the columns will not be stacked on top of each other on medium devices having screen size greater than equal to 768px and above. For this, add .col-md-* class. The columns are stacked on top of each other on devices having a screen size of less than 768px.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Grid Classes 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.0/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.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>Medium Grid</h1>
  <h5>When you resize the browser you will see the effect.</h5>
  <div class="container">
    <div class="row">
      <div class="col-md-6 bg-success">
       <p> In the medium grid, when you create columns (grid), then the columns will not stacked on top of each other on medium devices having screen size greater than equal to 768px and above. </p>
      </div>
      <div class="col-md-6 bg-warning">
        <p> In the medium grid, when you create columns (grid), then the columns will not stacked on top of each other on medium devices having screen size greater than equal to 768px and above. </p>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Output

The column appears side by side on medium screen size devices and above, which is shown below in figure.

med1.PNG

The columns will appears stacked on small and extra small devices, which is shown below in the figure.

med2.PNG

Large Grid - In the large grid, when you create columns (grid), then the columns will not be stacked on top of each other on large devices such as laptops having screen size greater than equal to 992px and above. For this, add .col-lg-* class.

Note: The columns are stacked on top of each other on devices having screen size less than 992px.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Grid Classes 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.0/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.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>Large Grid</h1>
  <h5>When you resize the browser you will see the effect.</h5>
  <div class="container">
    <div class="row">
      <div class="col-lg-6 bg-success">
       <p> In the large grid, when you create columns (grid), then the columns will not stacked on top of each other on large devices such as laptops having screen size greater than equal to 992px and above.</p>
      </div>
      <div class="col-lg-6 bg-warning">
        <p> In the large grid, when you create columns (grid), then the columns will not stacked on top of each other on large devices such as laptops having screen size greater than equal to 992px and above.</p>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Output

The column appears side by side on large screen size devices and above, that is shown below in figure.

lg.PNG

The columns will appear stacked on medium, small, and extra-small devices, which is shown below in the figure.

lg1.PNG

XLarge Grid - In the extra large grid, when you create columns (grid), then the columns will not be stacked on top of each other on extra large devices such as laptops and desktops having screen size greater than equal to 1200px and above. For this, add .col-xl-* class.

Note: The columns are stacked on top of each other on devices having screen size less than 1200px.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Grid Classes 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.0/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.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
  <h1>XLarge Grid</h1>
  <h5>When you resize the browser you will see the effect.</h5>
  <div class="container">
    <div class="row">
      <div class="col-xl-6 bg-success">
       <p>In the large grid, when you create columns (grid), then the columns will not stacked on top of each other on extra large devices such as laptops and desktops having screen size greater than equal to 1200px and above.</p>
      </div>
      <div class="col-xl-6 bg-warning">
        <p>In the large grid, when you create columns (grid), then the columns will not stacked on top of each other on extra large devices such as laptops and desktops having screen size greater than equal to 1200px and above.</p>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Output

The column appears side by side on extra-large screen devices, that is shown below in figure.

xl.PNG

The columns will appear stacked on large, medium, small, and extra-small devices, which is shown below in the figure.

xl2.PNG