×

Html & Html5

The World's best Software Development Study Portal

Basics of Grid


Grid is basically use to create responsive design like how we want to show our website in different -different screens like mobiles, tablets, or desktop etc.
But here Bootstrap permits only 12 columns in a page. But if you don’t want to use 12 columns in any page than we can group them just to make a larger column.

There are mainly five type of classes in Grid according to the resolution screen size:-

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

Here we will create 4 different types of classes which will be responsive too.


Let's understand this by following program:-


<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 5 Example</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

<div class="container-fluid">

<h1>four columns</h1>

<p>After resizing the browser window we can see the effect.</p>

<div class="row">

<div class="col-3" style="background-color:red;">.col</div>

<div class="col-sm-3" style="background-color:orange;">.col-sm-3 </div>

<div class="col-lg-3" style="background-color:blue;">.col-lg-3 </div>

<div class="col-xl-3" style="background-color:green;">.col-xl-3 </div>

</div>

</div>

</body>

</html>

Output of this Program


Here we had just created 4 columns and this is responsive too. You can check it by resizing the browser when you perform it.


bootstrap 5 Example

four columns

After resizing the browser window we can see the effect.

.col
.col-sm-3
.col-lg-3
.col-xl-3

So here we get 4 columns.



Two unequal responsive columns .

Let's understand this by the following program:-


<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 5 Example</title>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

<div class="container-fluid">

<h1>two columns</h1>

<p> After resizing the browser window we can see the effect. </p>

<div class="row">

<div class="col-sm-5" style="background-color:orange;">.col-sm-5</div>

<div class="col-lg-7" style="background-color:blue;">.col-lg-7</div>

</div>

</div>

</body>

</html>


Output of this Program


Here we had just created 2 columns and this is responsive too. We can check it by resizing the browser when you perform it.

Here is the output:-


bootstrap 5 Example

two columns

After resizing the browser window we can see the effect.

.col-sm-5
.col-lg-7





Bootstrap 4 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute