Why use Bootstrap's .w-100 class to split a row's columns into two rows, when you could just make two rows?

Question

On this page in the Bootstrap documentation at https://v4-alpha.getbootstrap.com/layout/grid/#equal-width-multi-row they give this example:

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

This creates two rows with two equal-sized columns in each row. However, you can achieve this just by creating two rows:

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Is there any difference between using the .w-100 CSS class and just creating two rows instead?

Answer 1

In this specific case, there is no difference.

However, keeping the cols in a single .row is generally better for these reasons...

Column ordering

Suppose you instead want to switch the order of the first and last columns on md and up. This would not be possible with separate .row containers. Keeping all the col in a single .row makes it possible.

<div class="row">
    <div class="col flex-md-last">col 1</div>
    <div class="col">col 2</div>
    <div class="w-100"></div>
    <div class="col">col 3</div>
    <div class="col flex-md-first">col 4</div>
</div>

---

Responsive layouts

Another example. Suppose you instead wanted a layout of:

• 4 cols across 1 row on md width (4x1)
• 2 cols across 2 rows on xs width (2x2)

Again, this would not be possible with separate .row divs. But, since the w-100 can be used responsively, this is possible by keeping all the cols in a single row.

<div class="row">
    <div class="col col-md-3">col 1</div>
    <div class="col col-md-3">col 2</div>
    <div class="w-100 hidden-md-up"></div>
    <div class="col col-md-3">col 3</div>
    <div class="col col-md-3">col 4</div>
</div>

Demo of the layouts