Explain the basic structure of the Bootstrap Grid
Last Updated :
13 Jun, 2022
Bootstrap grid is a very powerful tool that makes developing websites easier. It is made with flexbox hence fully responsive and also adjusts the items in the container according to the device width. The container is a wrapping element that wraps all other items and content on the web page. CSS requires this wrapping element to make the grid work properly. The .container class is the class that we usually use while making use of bootstrap in our code as it also provides some additional options like setting the alignment to the centre and horizontally padding the content.
The bootstrap grid has 12 columns present it, although it is not necessary to make use of all the columns, the sum must not go beyond 12. They can also be merged to make wider columns as per the preference.
The .row and .col classes can be used to create and manipulate the rows and columns of the grid respectively.
On basis of the device or browser’s width, the bootstrap grid system has the following five classes:
For small devices
- col: It has the browser’s width of less than 576px.
- col-sm: It has the browser’s width equal to or greater than 576px.
For medium devices
- col-md: It has the browser’s width equal to or greater than 768px.
For large and extra-large devices
- col-lg: It has a screen width equal to or greater than 992px.
- col-xl: It has a screen width equal to or greater than 1200px
Note: Here, the sm, md, lg, and xl denote the device sizes, i.e. small, medium, large and extra-large.
Basic Structure:
<div class="container">
<div class="row">
<div class="col-lg">
column-1
</div>
<div class="col-lg">
Column-2
</div>
</div>
</div>
This will create 2 centre-aligned columns of equal widths. The class container wraps all the rows, columns, and content of the grid. The class row is used to create a row and the class col-lg denotes the device width is large.
Example: Creating 3 equal columns of equal width.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Three Equal columns</title>
<link rel="stylesheet" href=
</head>
<body>
<h1 style="text-align: center; color: rgb(18, 171, 18);">
GeeksforGeeks
</h1>
<div class="container">
<div class="row" style="text-align: center;">
<div class="col-lg-4 col-md-4 col-12" style=
"background-color:#ffbe76; padding: 5px; height: 150px;">
<h2>column-1</h2>
</div>
<div class="col-lg-4 col-md-4 col-12" style=
"background-color:#34bcc4; padding: 5px; height: 150px;">
<h2>column-2</h2>
</div>
<div class="col-lg-4 col-md-4 col-12" style=
"background-color:#ff7979; padding: 5px; height: 150px;">
<h2>column-3</h2>
</div>
</div>
</div>
</body>
</html>
|
Output:
As you can see in the output, 3 columns of equal widths are created across the web page and column widths are adjusted according to the browser’s width making it responsive.
HTML is the foundation of web pages and is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.
CSS is the foundation of web pages and is used for webpage development by styling websites and web apps. You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...