Bootstrap row vs let column wrap

Question

Are there any differences creating new rows vs letting the rows wrap?

For example:

Let columns wrap.

<div class="row">
    <div class="col-6">Col-1</div>
    <div class="col-6">Col-2</div>
    <div class="col-6">Col-3</div>
    <div class="col-6">Col-4</div>
</div>

New row

<div class="row">
    <div class="col">
        <div class="row">
            <div class="col">Col-1</div>
            <div class="col">Col-2</div>
        </div>
        <div class="row">
            <div class="col">Col-3</div>
            <div class="col">Col-4</div>
        </div>
    </div>
</div>

Assuming I will not style the inner rows, they seem to have the same functionality. Is this the case? Is one way better than the other or, at lease, more idiomatic?

Zim · Accepted Answer · 2021-08-14T11:56:58.047

In the specific case you've shown, NO, there is no difference since only a single breakpoint (the xs default breakpoint) is being used.

However, if you wanted to create a responsive layout with different widths at different breakpoints, the 1st example would be preferred.

For example, suppose you want 4-cols on md and larger, and 2-cols on mobile. You'd use a single row with multi-breakpoint columns...

<div class="container">
    <div class="row">
        <div class="col-6 col-md-3">Col-1</div>
        <div class="col-6 col-md-3">Col-2</div>
        <div class="col-6 col-md-3">Col-3</div>
        <div class="col-6 col-md-3">Col-4</div>
    </div>
</div>

Whereas, splitting the cols in 2 rows simply wouldn't work for this responsive layout.

Demo

Related: Bootstrap row and col explanation

Bootstrap row vs let column wrap

1 Answers1