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 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/umd/popper.min.js"></script>
<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.
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.
<!DOCTYPE html>
<html lang="en">
<head>
<title> bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/umd/popper.min.js"></script>
<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>
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:-
