- Introduction and Installation
- Buttons, Glyphicons, Tables
- Vertical Forms, Horizontal Forms, Inline Forms
- DropDowns and Responsive Tabs
- Progress Bar and Jumbotron
The Grid System
In the previous article we had learnt about Bootstrap and its Installation.However, from this article, we are going to start with learning Bootstrap. We are going to talk about the Bootstrap Grid System in this article.
The Grid System:
Bootstrap Grid System allows up to 12 columns across the page. You can use each of them individually or merge them together for wider columns. You can use all combinations of values summing up to 12. You can use 12 columns each of width 1, or use 4 columns each of width 3 or any other combination.Grid Classes:
The Bootstrap grid system has four classes which can be combined to make more flexible layouts:
- xs – For Mobile Phones.
- sm – For Tablets/Phablets
- md – For Small-sized Desktops/Laptops
- lg – For Larger-sized Desktops/Laptops
Components of Grid System:
We will be learning the Components of the Grid system one-by-one:
- Containers: Bootstrap requires a containing element to wrap site contents and house our grid system. The word ‘container’ is a container of row elements and row elements are ‘containers’ of the column elements. You will understand it more in the later part of the article where we have dealt with columns.
Use ‘container’ for a responsive fixed width container.
Use ‘container-fluid’ for a full width container, spanning the entire width of your viewport.
- Rows: Rows must be placed within a ‘container’ or ‘container-fluid’ for proper alignment and padding. We use rows to create horizontal groups of columns.
- Columns: Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three col-lg-4.
Remember we can use all the grid classes (xs, sm, md and lg) for different screen sizes.
But, we would face a major problem in this case. Notice that for devices like mobiles(xs) and tablets(sm), the columns would stack upon one another. If we want our columns to stay in the same row, no matter what the size of device is, then we must use xs. But then, sometimes it looks ugly.
So, we can build even more dynamic and powerful layouts with using more than one choice for columns. Let’s say we define the attributes for 4 columns as-
What this means is:
For larger devices(lg), there would be a single row for all the four columns(3*4=12), each of grid size 3.
For medium sized devices(md), there would be two rows with two columns each (6*2 + 6*2=12+12). Each column would be of grid size 6.
For small sized devices(sm), there would be two rows. First row would have 3 columns and second row would have a single column .( 4*3 + 4*1=12+4). Each column is of grid size 4.
For extra small devices(xs), there would again be a single row and all the four columns in it(3*4=12), each of grid size 3.
Column Resets: With the four tiers of grids available, we are bound to run into issues where at certain breakpoints, the columns don’t quite clear right as one is taller( has more text) than the other column. A command called clearfix is there which fixes any issues regarding that viewport. We just need to write a div command with class clearfix after the block where the column isn’t clearing right.
Let’s say we have an issue with the md and sm viewport. But if we are using
But then it is causing problems for other viewport (maybe lg and xs) . So, what we can do is make clearfix visible only for the md and sm block or hide all other blocks (lg and xs).
Columns Offset: We can move the columns to the right by x columns using col-md-offset-x in the class.
Article By Harshit Gupta:
Kolkata based Harshit Gupta is an active blogger having keen interest in writing about current affairs, technical Blogs, stories, and personal life experiences. Besides passionate about writing, he also loves coding and dancing. Currently studying at IIEST, he is an active blog contributor at geeksforgeeks. You can reach him at https://in.linkedin.com/pub/harshit-gupta/102/b71/605
If you also wish to showcase your blog here,please see GBlog for guest blog writing on GeeksforGeeks.