1

I've been using Bootstrap for a while (specifically, version 3) and have noticed that I still am unsure whether I should always close columns with a that has a class of .row assigned to it after every 12 columns OR can I wait and apply that closing .row at the end of my code as long as I understand that any columns that add up to more than 12 columns in a single row will simply wrap automatically onto a new line. The benefit of the latter option is that it would be less code and less chances of forgetting to add that closing div tag for each 12 column row.

In other words, is it better to do this?

<div class="row">
  <div class="col-md-8">
   <p>some content here</p>
  </div>
  <div class="col-md-4">
   <p>some content here too</p>
  </div>
</div><!--/.row-->

<div class="row">
  <div class="col-md-6">
   <p>some content here</p>
  </div>
  <div class="col-md-6">
   <p>some content here too</p>
  </div>
</div><!--/.row-->

OR, is this method more efficient?

 <div class="row">
  <div class="col-md-8">
    <p>some content here</p>
  </div><!--/.col-md-8-->

  <div class="col-md-4">
    <p>some more content here</p>
  </div><!--/.col-md-4-->

 <div class="col-md-6">
   <p>some content here</p>
  </div>

  <div class="col-md-6">
   <p>some content here too</p>
  </div>
</div><!--/one .row div to close them all-->
redshift
  • 4,815
  • 13
  • 75
  • 138

1 Answers1

3

...well, it actually depends on the design - I am using both depending on the circumstance.

The difference lies in the height of the elements. If the two cols in the first row had different heights, closing the row would essentially mean that the two bottom columns would be aligned starting from the same top position.

However if the cols have different heights NOT closing the row can have different results.

edit: ...this is because of the way float works on the cols elements. Closing a row clears the float.

edit2: here is an example of both cases:

not closing row:

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

http://jsfiddle.net/b2rkgd5w/1/

closing row: http://jsfiddle.net/1krj49pm/2/

besides closing the row element the rest of the code is exactly the same.

scooterlord
  • 15,124
  • 11
  • 49
  • 68
  • 1
    I believe a [`div.clearfix.visible-*-block`](http://getbootstrap.com/css/#grid-responsive-resets) can also be used to clear the float without starting another row. – cvrebert Oct 19 '14 at 04:24
  • That was not what was asked – scooterlord Oct 19 '14 at 10:10
  • But your answer means that the BS docs (like quoted in the question) is wrong...: "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." – olefrank Mar 23 '17 at 22:34
  • @olefank, read the question more carefully. The row does not restrict its content to 12 columns, however closing a row is also clearing its content's floats. Check the fiddles I posted to see the differences - because the IS a difference to how the content renders. – scooterlord Mar 23 '17 at 22:51