A grid is an arrangement which is separated into div sections. This is an extremely helpful strategy to oversee HTML format and clients can make easily. To make organised grids and organized content , Bootstrap introduces responsive grid system which is the fastest and most straightforward path that allows up to 12 sections over the page. It incorporates predefined grid classes for making grid layouts for different sorts of gadgets, similar to mobile phones, tablets, desktop, etc.
The Bootstrap grid system has four classes:
Classes
Devices
Size
.col-xs-*
Extra Small Phones
Less than 768px
.col-sm-*
Small Devices Tablets
768px and Up
.col-md-*
Medium Devices Desktops
992px and Up
.col-lg-*
Large Devices Large Desktops
1200px and Up
To create grid system you must follow follwing rules:-
Rows must be set inside a .container or .container-fluid
Utilize rows to make horizontal groups of columns.
Content should be placed inside columns.
Predefined classes like .row and .col-sm-4 are accessible for rapidly making grid layouts
Columns make gaps between column content through padding. That padding is balanced in lines for the first and last column by means of negative margin on .rows
Grid columns are made by indicating the quantity of 12 accessible sections you wish to traverse. For instance, three equivalent sections would utilize three .col-sm-4
Structure of Bootstrap Grid Layout :-
Example :-
<div class = "container">
<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>
<div class = "container">
....
</div>
0 Comment(s)