Menu
I was wondering if my nested row can add up to more then 12? Is it wrong to work this way?
I tried it and it seems to work fine for me, but I want to make sure that I am doing this right.
For an example can I have this?
<div class="col-md-10">
<div class="container">
<div class="row">
<div class="col-md-3"> ... </div>
<div class="col-md-3"> ... </div>
<div class="col-md-3"> ... </div>
<div class="col-md-3"> ... </div>
<div class="col-md-3"> ... </div>
<div class="col-md-3"> ... </div>
<div class="col-md-3"> ... </div>
<div class="col-md-3"> ... </div>
</div>
</div>
</div>
446
Bootstrap was made for a 12-col usage. If you want to have more columns, you need to define your custom responsive grid, with the help of Bootstrap Less variables (see here). You'll mainly need to change these variables : @grid-columns : Number of columns in the grid. @grid-gutter-width Padding between columns.
Basic Structure of a Bootstrap Grid col-*-* classes). Note that numbers in . col-*-* should always add up to 12 for each row.
There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g., col-4 spans four).
This is known as column wrapping. If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
Yes, it's ok to have more that 12 columns in a row It will just make the extra columns wrap to the next line. So, with your example you'd have 2 rows of 4.
http://bootply.com/91392
From the Bootstrap docs (http://getbootstrap.com/css/#grid)..
"If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line"
Also, here are some examples that show using more than 12 columns (col-*) in a single row: http://getbootstrap.com/css/#grid-example-mixed
Just be aware of responsive resets if the columns vary in height. Read more about when to use Bootstrap row
Related questions:
Bootstrap what will happen if I put more than 12 columns in a row?
Bootstrap 3 - Use more than 12 columns in a row
Where to place bootstrap row class
Boostrap row on multiple lines
119
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
