The grid system is one of the most important style structures. We use it for making content more stylish and responsive. Here we learn about it from the basic.
So what we are going to learn
- What is Grid?
- Grid Classes for different Screen Size.
- Examples
So What is Grid?
According to Wikipedia,
“In graphic design, a grid is a structure (usually two-dimensional) made up of a series of intersecting straight (vertical, horizontal, and angular) or curved lines (grid lines) used to structure content. The grid serves as an armature or framework on which a designer can organize graphic elements (images, glyphs, paragraphs, etc.) in a rational, easy-to-absorb manner.”
On our web page, we want to make the content eye-catching. Therefore, we add some style to the page. Grid system allows us to make a layout through a series of rows and columns.
Basically, the Bootstrap Grid system allows up to 12 columns across the page. So You can use these columns individually or you can group the columns together. Therefore, you can create a wider column.
Row :
we use .row class to create a new row .
Column:
We use .col class for making a new column in a row. Though, there are various types of classes for making responsive columns for different systems. Later We learn all of those classes in this blog. Firstly, we learn to create some rows and columns with some basic classes.
Now, look into the above box. We made a row. Then we divided it into some equivalent columns. We use bootstrap’s classes to make these multiple rows and columns. Not only these, but we can also make various columns with different sizes.
You can see that we can make different sizes of columns. All of those columns are made with different classes .
Useful classes for making Rows and Columns:
Grid System for different screen size
In the above picture, you can see the class which we used for making responsive columns. Sm means small devices like mobile phones. md means medium devices like tabs. And lg / xl refers to big screen devices like laptops and computers.
First ,we make two mobile responsive columns in a row. So we need these classes .col-lg-6 and .col-sm-6 .
<!DOCTYPE html>
<html>
<head>
<title>Blogs</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<style>
h2{
text-align: center;
margin: 20px;
}
#col{
height:60px;
padding:20px;
}
.row{
margin:5px;
}
h6 {
text-align: center;
font-size: 22px;
font-family: arial;
}
</style>
<body class=" bg-light p-4 mt-5">
<div class="container ">
<div class="jumbotron ">
<h2>Bootstrap Grid System</h2>
</div>
</div>
<div class="container ">
<h6>Firstly, we divided the row into two columns</h6>
<div class="row">
<div class="col-lg-6 col-sm-6" style="background-color:#ffffb4;" id="col">
<p>This is column-1 .</p>
</div>
<div class="col-lg-6 col-sm-6" style="background-color:#b4ffc4;" id="col">
<p>This is column-2 .</p>
</div>
</div>
</body>
</html>Make it responsive
We use .col-sm.6 class for making these columns mobile responsive. ‘sm ‘ refers to small devices. If we don’t use that class, then it looks like two rows in mobiles or small devices. But if we want to make a single column in a row then we use the class .col-sm-12 .
Similarly, we can create 3 columns in a row. We just write the class .col-4 . So we can also create 4 columns in a row with the class .col-3 .We just add lg / sm /md for different types of devices. Further, we will learn more things about it. Hope you understand the grid system of Bootstrap.
In our next blog, we learn how to make different types of buttons with bootstrap classes. If we miss our previous blog then visit this page jumbotron.