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:
Consider what is most important.
Create to smaller width first.
Base CSS address mobile device first, media queries address for tablet, desktops.
Add more elements as screen size increases.
How working of the bootstrap grid system?
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>
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.