People often struggle with the use of rows and columns in the Bootstrap grid. This snippet below might help. It comes from here.
Again, feel free to edit, add, delete when relevant.
Note:
The grid system in bootstrap is all about setting up your layout with divs and then putting elements inside those divs.
Understanding Columns
For example:
- col-*-6 will make the width be 50% (half as 6 is half of 12)
- col-*-4 will make the width be 33.33% (1/3 as 4 is 1/3 * 12)
(the * here is to be replaced with xs, sm, md, lg).
Adding something like a button…
The btn-block class is adding: width:100% and display:block , which is i_n conflict with the .col-* classes width…_
This is why you need to have a container (aka: div with col-* class) and inside of it put the button. Also this will ensure that you have a nice padding around the buttons too.
This is a quick illustration of the Bootstrap Grid
(Feel free to fork it, improve it, and replace my link with better examples!!)
NOTE: This is a wiki, you can edit this article directly !)