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?

Carol Skelly · 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