Bootstrap4 Alpha: Using

Question

I do have a question related to using in Bootstrap 4 Alpha.

Let's assume we need following html div structure

Box 50% width, Box 50% width

Box 50% width, Box 50% width

Box 50% width, Box 50% width

The, is it more appropriate to say

Variant 1:

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

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

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

Or Variant 2:

<div class="row">

<div class="col-lg-6"></div>
<div class="col-lg-6"></div>

<div class="col-lg-6"></div>
<div class="col-lg-6"></div>

<div class="col-lg-6"></div>
<div class="col-lg-6"></div>

</div>

As all of the examples on the Bootstrap page have row included by default, I couldn't tell whether this is also true for multiple elements.

Thanks for your help!

Answer 1

Variant 2 will work. This has already been answered here for Bootstrap 3, and Bootstrap 4 works the same. It's ok to have more than 12 col-*-* units in a single row tag. It's called "column wrapping".

From the Bootstrap docs..

"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."

You just need to be aware that if your column content varies in height, you should use responsive resets to "clear" the columns so that they wrap evenly.

Example with clearfix resets: http://www.bootply.com/C4BMA2nDth