Bootstrap grid system. Can we use 2 col - * - 12 in the .row class?
From all the links I've read on the internet, I understand that the sum of all col classes inside the row class should be 12.
But I've seen cases where people use multiple col - * - 12 within a string. Is this valid bootstrap syntax?
For example, the following: VALID -
<div class="row">
<div class="col-xs-6">
</div>
<div class="col-xs-6">
</div>
</div>
And then also VALID
<div class="row">
<div class="col-xs-9">
</div>
<div class="col-xs-3">
</div>
</div>
Is the next VALID?
<div class="row">
<div class="col-xs-12"></div>
<div class="col-xs-12"></div>
</div>
Please provide correct arguments.
EDIT: Thanks for letting me know this is REALLY. Can anyone let me know if this is a good idea? or maybe do the next better
<div class="row">
<div class="col-xs-12"></div>
</div>
<div class="row">
<div class="col-xs-12"></div>
</div>
Which one is the better of the two?
source to share
Yes this is true. According to doc
If more than 12 columns are placed in one row, each group of additional columns will, as one block, wrap on a new row.
UPDATE:
If you have different block heights and put everything inside the same block of lines, you will get wrong behavior. See plunker
but if you only use it col-X-12
, it doesn't matter how you use the classes row
. I think for col-X-12
you can even skip the class row
and col-X-12
. Just put everything in a regular tag div
and you get 100% width.
source to share
Of course it is valid, it just defines two elements 100% width div
that are on the same line.
It makes no real difference if you use it the same way or put them separately in two divs row
, of course depending on your css you are applying to the line.
In your example, tags col-xs-12
and col-md-12
will be stacked on top of each other, with both being 100% wide. There is even no real difference what you define xs
and md
because they will always be 100% wide, across all screen widths.
source to share