Using .row too much in bootstrap 4

Question

I've found a few examples and some contradictory things about the .row class in bootstrap. Is it better to do

a)

<div class="container">
   <div class="row">
      <div class="col-md-12">
      </div><!-- .col-md-12 -->
   </div><!-- .row -->

   <div class="row">
      <div class="col-md-6">
      </div><!-- .col-md-6 -->

      <div class="col-md-6">
      </div><!-- .col-md-6 -->
   </div><!-- .row -->
</div><!-- .container -->

or

b)

<div class="container">
   <div class="row">
      <div class="col-md-12">
      </div><!-- .col-md-12 -->

      <div class="col-md-6">
      </div><!-- .col-md-6 -->

      <div class="col-md-6">
      </div><!-- .col-md-6 -->
   </div><!-- .row -->
</div><!-- .container -->

Or does it not matter?

There is no better. Use what you need for your layout. – j08691 Dec 04 '15 at 17:07 — j08691, Dec 04 '15 at 17:07

Carol Skelly · Answer 1 · 2016-09-25T16:11:15.677

The extra .row isn't necessary. As it says in the BS docs, when you have more than 12 it forces the extra columns to wrap, creating a new visible row..

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

score 0 · Answer 2 · answered Dec 24 '15 at 23:50

The best way to use Bootstrap's grid is to leverage LESS/Sass mixins. Check out Bootstrap 4 mixins for using a grid: https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_grid.scss

They are quite a bit different than Bootstrap 3 Sass, which is what it looks like you are trying to do above.

The newer grid utilizes Flexbox instead of sized floats. Bootstrap itself hasn't released official documentation for the 4.x series of bootstrap so there really isn't an established best practice for using the grid yet.

For Bootstrap 3, I usually setup a scss partial in my project that looks something like this:

// This sets up a row in your markup
.content-row {
  @include make-row();
}

// This sets up a 10 column element with a one column offset 
// For all screens up 1200px, after that it's an 8 col grid
.content-standard {
  @include make-sm-column(10);
  @include make-sm-column-offset(1);
  @include make-md-column(10);
  @include make-md-column-offset(1);
  @include make-lg-column(8);
  @include make-lg-column-offset(2);
}

You can then apply the grid into your markup pretty easily without all those .col-md-8 classes cluttering things up. It would look something like this:

<section class="content-row">
  <div class="content-standard">
  </div>
</section>

Using .row too much in bootstrap 4

2 Answers2