How To Create Multi-Column Layouts with Bootstrap 3 Grid System
With the latest Bootstrap 3 mobile first grid framework you can without much of a stretch control how your site design will render on various sorts of gadgets that have distinctive screen sizes like mobile phones, desktops, tablets and so forth.Consider, that there are a total of 12 content boxes in all gadgets, however its placement fluctuates as per the gadget screen size, as in mobile phones the format is rendered as single column grid design which has 1 column and 12 rows put over each other, while in tablet it is rendered as two column grid layout which has 2 columns and 6 rows. Further, on medium screen size gadgets such as laptops and desktops it is rendered as three column grid format which as 3 columns and 4 rows and lastly in huge screen gadgets like expansive desktops it is rendered as four column layout which has 4 columns and 3 rows.
Presently the question is how we can make such responsive formats utilizing this Bootstrap new mobile first grid framework. How about we begin with the medium sized gadget that can be an ordinary desktop or laptop. Since our medium gadget format has 3 columns and 4 rows i.e. 3x4 network format, so the HTML code for making such framework structure would be something like this.
<div class="container">
<div class="row">
<div class="col-md-4"><p>Box 1</p></div>
<div class="col-md-4"><p>Box 2</p></div>
<div class="col-md-4"><p>Box 3</p></div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-4"><p>Box 4</p></div>
<div class="col-md-4"><p>Box 5</p></div>
<div class="col-md-4"><p>Box 6</p></div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-4"><p>Box 7</p></div>
<div class="col-md-4"><p>Box 8</p></div>
<div class="col-md-4"><p>Box 9</p></div>
<div class="clearfix visible-md-block"></div>
<div class="col-md-4"><p>Box 10</p></div>
<div class="col-md-4"><p>Box 11</p></div>
<div class="col-md-4"><p>Box 12</p></div>
</div>
</div>
