3

From all the links I have read online, I understand that the sum of all the col classes inside a row class should be 12.

But, I have seen cases where people are using multiple col-*-12 inside a row. Is this a valid bootstrap syntax?

For example- The following is VALID-

<div class="row">
  <div class="col-xs-6">
  </div>
  <div class="col-xs-6">
  </div>
</div>

And the following is also VALID

<div class="row">
  <div class="col-xs-9">
  </div>
  <div class="col-xs-3">
  </div>
</div>

Is the following VALID?

<div class="row">
  <div class="col-xs-12"></div>
  <div class="col-xs-12"></div>
</div>

Please give proper reasoning.

EDIT: Thanks for letting me know that it's VALID. Can anyone let me know if it's a good idea to do so? or may be, doing the following is better

<div class="row">
  <div class="col-xs-12"></div>
</div>
<div class="row">
  <div class="col-xs-12"></div>
</div>

Which one is better out of the two?

amphetamachine
  • 27,620
  • 12
  • 60
  • 72
Chirag Mongia
  • 545
  • 4
  • 12

2 Answers2

4

Yes it is valid. According to the doc

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.

UPDATE:

If you have different height blocks and you put everything inside one row block, you will get incorrect behavior. See this plunker

but if you use col-X-12 only, it does not really matter the way you use row classes. I think for col-X-12 you can even skip row and col-X-12 class. Just put everything inside regular div tag and you will get 100% width.

Chirag Mongia
  • 545
  • 4
  • 12
iurii
  • 4,142
  • 2
  • 23
  • 28
  • @yuyokk- I have done an EDIT in the question. Can you please answer that as well? – Chirag Mongia Jun 15 '15 at 09:06
  • If you have different height blocks and you put everything inside one row block, you will get incorrect behavior. See this http://plnkr.co/edit/H93vNpbUem5XBMYiCjec?p=preview – iurii Jun 15 '15 at 10:39
  • but if you use col-X-12 only, it does not really matter the way you use row classes. I think for col-X-12 you can even skip row and col-X-12 class. Just put everything inside regular
    tag and you will get 100% width.
     – iurii Jun 15 '15 at 10:43
  • Can you please add that to your answer so that I can accept it? – Chirag Mongia Jun 16 '15 at 09:11
  • it does not let me paste plunker link in the body :( – iurii Jun 16 '15 at 09:17
  • I have made that plunker link work :) – Chirag Mongia Jun 16 '15 at 11:07
  • I don't really see the plnkr as "incorrect behavior". It's simply floating the wrapping columns which in some cases is desired behavior. – Carol Skelly Jun 22 '15 at 10:13
1

Of course it is valid, it just defines two 100% width div elements, that are both in one row.

It has no real difference, if you use it like that or put them separately in two row divs, of course depending on your css that you apply to the row.

In your example, the col-xs-12 and col-md-12 will be stacked on each other, with both having 100% width. There is even no real difference that you defined xs and md, because they will always be 100% in width, on all screen widths.

brance
  • 1,157
  • 9
  • 22