Digital graphic design, a grid is a structure (most usually two-dimensional) made up of a series of intersecting straight (horizontal, vertical) lines used to structure the web content. This is widely used to design layout and content structure in print design also. In web design, it is a very effective method to create a consistent layout rapidly and effectively using HTML and CSS. In this session let us discuss more about BootStrap grid system.
Introduction to Bootstrap Grid
Bootstrap 3’s grid system is used to help generate responsive grid layouts in less time and lower maintenance cost. Grid system allow to make responsive website, and the columns will re-arrange the all layouts depending on the screen size. Every column will arrange the all data when this page execute on the screen size. A big screen it might look better with the content organized in three columns, but on a small screen it would be better if the content items were stacked on top of each other.
Bootstrap’s grid system allows up to 12 columns across the page. You can use all grid as per your need.
Read below pints:
- If you want to create 12 columns so you need to add separate 12 columns
- If you want to make 3 columns, so you need to use 4 grid column class.
- If you want to make 2 columns, so you need to use 6 grid column class.
- If you want to create full column layout so you can use 12 grid column class- it will allow to make full width of container.
Grid Classes
Bootstrap grid system providing a four classes as per respective of screen sizes & device.
- xs (for phones)
- sm (for tablets)
- md (for desktops)
- lg (for larger desktops)
| Column Name | Devices | Screen Sizes |
|---|---|---|
| .col-xs-$ | Extra Small | Phones Less than 768px |
| .col-xs-$ | Small Devices | Tablet 768px and Up |
| .col-xs-$ | Small Devices | Desktop 992px and Up |
| .col-xs-$ | Small Devices | Large Desktop 1200px and Up |
The numbers in the .col-sm-* classes indicates how many columns the div should span (out of 12). So, .col-sm-1 spans 1 column, .col-sm-4 spans 4 columns, .col-sm-6 spans 6 columns, etc.
BootStrap Grid System Rules
Following are points for basic rules:
- Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
- Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows
- Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts.
- Use rows to create horizontal groups of columns.
- Content should be placed within columns, and only columns may be immediate children of rows.
- Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4
Basic structure of bootstrap grid system:
<div class="container"> <div class="row"> <div class="col-*-*"></div> </div> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row"> ... </div> </div>
Create a container (<div class=”container”>). Next, create a row (<div class=”row”>). Then, add the number of columns which you want to make it (tags with appropriate .col-*-* classes). Note that numbers in .col-*-* should always add up to 12 for each row.
Basic Elements of Bootstrap Grid System
Below are the basic elements used in Bootstrap 3 Grid System:
Container
This is the containing element for inner grid elements. Its major properties are:
Padding-right : 15px; Padding-left : 15px; Margin-left : auto; Margin-right : auto;
Along with it there are following media queries that apply:
For min-width : 1200px; then width : 1170px; For min-width : 992px; then width : 970px; For min-width : 768px; then width : 750px;
<div class="container"></div>
Container-fluid
This is also the containing element for inner grid elements but without media queries. Its major properties are:
Padding-right : 15px; Padding-left : 15px; Margin-left : auto; Margin-right : auto;
<div class="container-fluid"></div>
Row
This element represents the horizontal row in a grid system. Its major properties are:
margin-right : -15px; margin-left : -15px; display : block;
<div class="row"></div>
Column
This element represents the horizontal row in a grid system. Its major properties are:
padding-right : 15px; padding-left : 15px; width : 100%; min-height : 1px;
<div class="col-xs-12"></div>
Columns in details
In Bootstrap 3, four types of screen resolution are provided. These ranges are:
lg – for large – This represent large desktop screen resolutions in range of 1200px and above.
md – for medium – This represent desktop/laptop screens with screen resolution in range of 992px to 1200px
sm – for small – This represent tablet screens with resolution in range of 768px to 992px.
xs – for extra small – This represent mobile screens with resolution less than 768px.
Each screen is divided into 12 columns by default. When forming grid, layouts for each range of screen resolution should be kept in consideration and provided in the code.
Columns Classes with Example
<div class=”col-lg-12″> – to create a column covering entire width of containing element ,for large resolution screen
<div class=”col-md-4″> – to create a column covering 4 out of 12 columns of containing element width, for medium resolution screen
<div class=”col-sm-3″> – to create a column covering 3 out of 12 columns of containing element width, for small resolution screen
<div class=”col-xs-6″> – to create a column covering 6 out of 12 columns of containing element width, for extra small resolution screen
<div class=”col-xs-12 col-sm-8 col-md-9 col-lg-6″> – col-xs-12 col-sm-9 col-md-8 col-lg-6 – covers 100% in extra small screen, 75% in small, 66% in medium and 50% in large resolution screen.
