Let’s continue our learning from Learning Bootstrap Grid System Part 1 earlier, now we will learn about creating Bootstrap Grid System on HTML.
As we know that Bootstrap allows you to build up to 12 columns and for rows, it’s unlimited. Okay, let’s say you have included bootstrap.css, bootstrap.js, and Jquery.js to your web files (you can download all necessary files from Bootstrap Official Website). First, here we go to create two column layouts.
HTML:
<div class="container"> <!--Row with two equal columns--> <div class="row"> <div class="col-sm-6">Column 1</div> <div class="col-sm-6"> Column 2</div> </div> <!--Row with two columns divided in 1:2 ratio--> <div class="row"> <div class="col-sm-4"> Column 1 </div> <div class="col-sm-8"> Column 2</div> </div> <!--Row with two columns divided in 1:3 ratio--> <div class="row"> <div class="col-sm-3">Column 1</div> <div class="col-sm-9">Column 2</div> </div> </div>
That example will show you how to create two column layouts for tablets, laptops and desktops etc. However, on mobile phones, the columns will automatically become horizontal. Why is that? Because it’s “sm” written there, hence only until small devices, the layout will keep on 2 columns. To make it 2 columns on all devices (mobile phone, tablets, laptops and desktops), you should use “xs”. So, the HTML code will look like this:
<div class="container"> <!--Row with two equal columns--> <div class="row"> <div class="col-xs-6">Column 1</div> <div class="col-xs-6">Column 2</div> </div> <!--Row with two columns divided in 1:2 ratio--> <div class="row"> <div class="col-xs-4">Column 1</div> <div class="col-xs-8">Column 2</div> </div> <!--Row with two columns divided in 1:3 ratio--> <div class="row"> <div class="col-xs-3">Column 1</div> <div class="col-xs-9">Column 2</div> </div> </div>
As you can see there, every row contains maximum 12 columns, so if more than 12 grid columns are located within one row, then each group of extra columns will go onto new line as a whole.
Above examples are for creating two column layouts, what about more than 2 column layouts? Well, you just add more ‘div’ tags inside a row as long as the total grid not more than 12. Here is the examples:
<div class="container"> <!--Row with three equal columns--> <div class="row"> <div class="col-md-4">Column 1</div> <div class="col-md-4">Column 2</div> <div class="col-md-4">Column 3</div> </div> <!--Row with three columns divided in 1:4:1 ratio--> <div class="row"> <div class="col-md-2">Column left</div> <div class="col-md-8">Column middle</div> <div class="col-md-2">Column right</div> </div> <!--Row with four equal columns--> <div class="row"> <div class="col-md-3"> Column 1</div> <div class="col-md-3"> Column 2</div> <div class="col-md-3"> Column 3</div> <div class="col-md-3"> Column 4</div> </div> <!--Row with four columns divided unevenly--> <div class="row"> <div class="col-md-3"> Column 1</div> <div class="col-md-1"> Column 2</div> <div class="col-md-4"> Column 3</div> <div class="col-md-2"> Column 4</div> </div> <!--Row with six equal columns--> <div class="row"> <div class="col-md-2"> Column 1</div> <div class="col-md-2"> Column 2</div> <div class="col-md-2"> Column 3</div> <div class="col-md-2"> Column 4</div> <div class="col-md-2"> Column 5</div> <div class="col-md-2"> Column 6</div> </div> </div>
Those are the examples. I am sure you can learn from those examples for creating multiple columns in one row. However, on those examples, I use col-md-*, means that the columns will become horizontal on device which of pixel less than 991px. You can change ‘md’ to ‘lg’ or ‘sm’ or ‘xs’ freely depend on your need.
How about creating 4 columns in large devices, but 2 columns on small devices, and one column in mobile phone?
You can customize that as well. Here is the code:
<div class="container"><!--Row with three equal columns--> <div class="row"> <div class="col-lg-3 col-sm-6">Column 1</div> <div class="col-lg-3 col-sm-6">Column 2</div> <div class="col-lg-3 col-sm-6">Column 3</div> <div class="col-lg-3 col-sm-6">Column 4</div> </div> </div>
Above code will produce 4 columns at large and medium devices (because of col-lg-3), but in small device it will become 2 columns (because of col-sm-6), and will become one column on mobile phone (because no breakpoints defined using col-xs-*). You can do other experiments by yourself about this flexible layout.
That’s all about Bootstrap Grid System. Hope you can know more about it, and of course keep learning and explore more about Bootstrap!
