This article covers about how to use grid layout system with bootstrap. You can learn about what is a grid layout and how we can create nice grid layouts using bootstrap and its classes.
Grid Layout classes | Grid Layout Structure | Sample Two Column Layout
What is a Grid?
A grid is a structure which made up of a series of intersecting straight lines like vertical and horizontal used to structure the content. The grid mostly is used to create a layout and content framework in print design. For web design, the grid is the very effective technique to create a consistent layout rapidly and mostly using CSS and HTML.
In other words, the grids in web design organize and structure content, which creates the web site easy to scan and reduces the cognitive load on users.
Bootstrap Grid System
The Bootstrap grid system provides up to 12 columns across the page. It includes a responsive mobile-first grid system that appropriately scales up to 12 columns as the device and viewport size increase. Bootstrap also includes predefined classes for easy layout options as well as powerful mixins for creating the most semantic layout.
If you do not want to use all 12 columns individually then you can group the columns together to generate wider columns. Such as:
Bootstrap gird system provides four classes such as:
- xs: The xn class is used for phones.
- sm: The sm class is used for tablets.
- md: The md class is used for desktops.
- lg: The lg class is used for larger desktops.
Mobile-first strategy
- Content
Consider what is most important.
- Layout
Create to smaller width first.
Base CSS address mobile device first, media queries address for tablet, desktops.
- Progressive Enhancement
Add more elements as screen size increases.
How working of the bootstrap grid system?
- The bootstrap grid system is used for designing page layouts through a series of rows and columns that house your content. Here is, given how the bootstrap grid system works.
- In the grid, use rows to generate horizontal groups of columns.
- The content must be placed within the columns and only columns may be the immediate children of rows.
- In bootstrap grid system classes such as .row and .col-xs-4 are available for quickly creating grid layouts. The LESS mixins can also be used for semantic layouts.
- The columns design gutters like gaps between column content from padding.
- The grid columns are generated by specifying the number of 12 available columns you wish to span.
- In the grid, rows must be placed within a .container class for the perfect order and padding.
The following grid structure is:
<div class = "container"> <div class = "row"> <div class = "col-*-*"></div> <div class = "col-*-*"></div> </div> <div class = "row">...</div> </div> <div class = "container"> .... </div>
How to designing two column layouts?
Let us see this example will show you how to design two column layouts for small, medium and large devices such as tablets, desktop and laptop and so on.
<div class="container"> <!--Row with two equal columns--> <div class="row"> <div class="col-sm-6"><!--Column left--></div> <div class="col-sm-6"><!--Column right--></div> </div> <!--Row with two columns divided in 1:2 ratio--> <div class="row"> <div class="col-sm-4"><!--Column left--></div> <div class="col-sm-8"><!--Column right--></div> </div> <!--Row with two columns divided in 1:3 ratio--> <div class="row"> <div class="col-sm-3"><!--Column left--></div> <div class="col-sm-9"><!--Column right--></div> </div> </div>
We know that the bootstrap grid system is based on 12 columns so to keep the columns in one line that is side by side, and the sum of the grid columns numbers in each row should be equal to 12. If you analyze this example carefully you will determine the numbers of grid columns like col-sm-* add up to 12 such as 6+6, 4+8 and 3+9 for each row.