Best practice for single column within row in bootstrap v3 grid system?

Question

I think adding a col*-12 will be the best practice. It will make all rows in your grid act the same.

Example:

enter image description here

html

<div class="container">
   <div class="row" style="background-color:yellow;">
      <div class="col-xs-12" style="background-color:aqua;">col-xs-12 inside a row</div>
   </div>
</div>
<div class="container">
   <div class="row" style="background-color:yellow;">
      direct inside a row
   </div>
</div>
<div class="container">
   <div class="row" style="background-color:yellow;">
      <div class="col-xs-6" style="background-color:red;">col-xs-6 inside a row</div>
      <div class="col-xs-6" style="background-color:orange;">col-xs-6 inside a row</div>
   </div>
</div>

As you see the content is NOT in line with the other rows when you don’t add a col-*-12 (due to the missing padding). All the rows the same will make future changes easier.

You will have to notice the col-12 columns differs from the other col--* cause the don’t have a float left, see: https://github.com/twbs/bootstrap/issues/10152

Leave a Comment Cancel reply