Grid System of Bootstrap 4

Bootstraop-4-grids

Bootstrap automatically creates mobile-friendly web pages using the concept of grid and it divides screen width into 12 grids we can call these grids as col.

So bootstrap has some classes which is used to create these grids

col-12 will create a grid of full width and

col-6 will create a grid of half the device-width

I think now you are able to understand this grid system but if not then you can refer below examples which Will help you to understand more

Example

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

<div class="container-fluid">
 
  
  <div class="container-fluid">
    <!-- Control the column width, and how they should appear on different devices -->
    <div class="row">
      <div class="col-6" style="background-color:yellow;">50%</div>
      <div class="col-6" style="background-color:orange;">50%</div>
    </div>
    <br>
    
    <div class="row">
      <div class="col-12" style="background-color:blue;">100%</div>
 
    </div>
  
  </div>
</div>

Output:

Bootstrap Example
50%
50%

100%

Output:

So now comes a question how this will make phone responsive

So these grids are flex grids and bootstrap has some range of device sizes –

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

There are more classes in BS3 like xs extra small device but this is not in BS4.

Some Bootstrap 4 grid system rules:

These col grids must be placed inside .row class and .row must be placed inside .container OR .container-fuid classs.

Bootstrap 4 now uses flexbox, instead of floats

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

<div class="container-fluid">
  <h1>Basic Grid Structure</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The first, second and third row will automatically stack on top of each other when the screen is less than 576px wide.</p>
  
  <div class="container-fluid">
    <!-- Control the column width, and how they should appear on different devices -->
    <div class="row">
      <div class="col-sm-6" style="background-color:yellow;">50%</div>
      <div class="col-sm-6" style="background-color:orange;">50%</div>
    </div>
    <br>
    
    <div class="row">
      <div class="col-sm-4" style="background-color:yellow;">33.33%</div>
      <div class="col-sm-4" style="background-color:orange;">33.33%</div>
      <div class="col-sm-4" style="background-color:yellow;">33.33%</div>
    </div>
    <br>

    <!-- Or let Bootstrap automatically handle the layout -->
    <div class="row">
      <div class="col-sm" style="background-color:yellow;">25%</div>
      <div class="col-sm" style="background-color:orange;">25%</div>
      <div class="col-sm" style="background-color:yellow;">25%</div>
      <div class="col-sm" style="background-color:orange;">25%</div>
    </div>
    <br>
    
    <div class="row">
      <div class="col" style="background-color:yellow;">25%</div>
      <div class="col" style="background-color:orange;">25%</div>
      <div class="col" style="background-color:yellow;">25%</div>
      <div class="col" style="background-color:orange;">25%</div>
    </div>
  </div>
</div>
Bootstrap Example

Basic Grid Structure

Resize the browser window to see the effect.

The first, second and third row will automatically stack on top of each other when the screen is less than 576px wide.

50%
50%

33.33%
33.33%
33.33%

25%
25%
25%
25%

25%
25%
25%
25%

One Comment on “Grid System of Bootstrap 4”

Leave a Reply

Your email address will not be published. Required fields are marked *