Home >>Bootstrap Tutorial >Bootstrap Grid System

Bootstrap Grid System

Bootstrap Grid

The bootstrap Grid system allows you to create advanced layouts across the page using rows and columns. The bootstrap grid system allows you up to 12 columns across the page. It is responsive and the columns are rearranged automatically for different viewport sizes.

You can also use them automatically or groups (merge) them together for wider column. You can specify up to 12 columns in a single row.

Note: It is not required that you use all 12 available columns.

Grid Classes

The Bootstrap grid system includes five classes:

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

Note: when you resize the browser, columns will automatically adjust itself according the grid classes.

Basic structure of bootstrap grid

<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Grid options

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Max container width	None (auto)	540px	720px	960px	1140px
Class prefix	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl

Four Columns

It shows how to create four equal-width columns, on all types of devices and screen width

Let's take an example of bootstrap grid system with four columns:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap grid</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.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.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<p>when you resizing the browser, you’ll see that the four columns are always shown in a single row .col is used for extra small devices.  </p>
<div class="row">
  <div class="col bg-primary">.col</div>
  <div class="col bg-success">.col</div>
  <div class="col bg-danger">.col</div>
  <div class="col bg-warning">.col</div>
</div>
</div>
</body>
</html>

Output:

Two Unequal Responsive Columns

You can also create two unequal responsive columns using the grid system:

Let's take an example of two unequal responsive columns :

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Grid</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.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.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
  <div class="col-sm-8 bg-warning">.col-sm-8</div>
  <div class="col-sm-4 bg-success">.col-sm-4</div>
</div>
</div>
</body>
</html>

Output:

Two Classes in a single Row

Let's see examples how to use two classes in a row:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.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.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<p> when you resizing the browser, you’ll see that the four columns are show in a single row in extra small devices(.col) and in medium devices in will automatically adjust in two columns in a single row .  </p>
<div class="row">
  <div class="col col-md-6 bg-warning">.col-sm-3</div>
  <div class="col col-md-6 bg-success">.col-sm-3</div>
    <div class="col col-md-6 bg-info">.col-sm-3</div>
  <div class="col col-md-6 bg-danger">.col-sm-3</div>
</div>
</div>
</body>
</html>

Output:

Nesting Columns

Nesting means you can place the columns inside the other columns. To do this add a you can add a new row within the parent column after that add your nested columns. Once you have a container and row then you can nest columns.

Let's take an example of nesting columns:

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap nesting columns</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<p>Add columns inside other columns</p>
  <div class="row">
    <div class="col-8 bg-secondary py-3">
      .col-8
      <div class="row">
        <div class="col-6 bg-danger py-2">.col-6</div>
        <div class="col-6 bg-light py-2">.col-6</div>
      </div>
    </div>
    <div class="col-4 bg-info">.col-4</div>
  </div>
</div>
</body>
</html>

Output:

Add columns inside other columns

.col-8

.col-6

.col-4

when you resizing the browser, you’ll see that the four columns are always shown in a single row .col is used for extra small devices.

.col

.col-sm-8

.col-sm-4

when you resizing the browser, you’ll see that the four columns are show in a single row in extra small devices(.col) and in medium devices in will automatically adjust in two columns in a single row .

.col-sm-3

« Previous Next »

Bootstrap Tutorial Bootstrap Introduction Bootstrap Example Bootstrap Container Bootstrap Jumbotron Bootstrap Grid System Bootstrap Alerts Bootstrap Typography Bootstrap Table Bootstrap Colors Bootstrap Forms Bootstrap Images Bootstrap Buttons Bootstrap Button Group Bootstrap Progress Bars Bootstrap Badges Bootstrap Pagination Bootstrap Cards Bootstrap Navs Bootstrap Fixed Navigation Bar Bootstrap Navigation Bar Bootstrap Collapse Bootstrap Carousel Bootstrap Modal Bootstrap Input Groups Bootstrap List Groups Bootstrap Tooltip Bootstrap Popover Bootstrap Flex Bootstrap Utilities Bootstrap Media Objects

Bootstrap Interview Questions

No Sidebar ads