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

Question

I've read about the grid system here: http://getbootstrap.com/css/#grid. While the documentation doesn't directly address a scenario in which there's one column within a row, I do see one example of this here: http://getbootstrap.com/css/#grid-offsetting > third row of the example code.

Currently, I'm applying the class .col-xs-12 to the one column within the containing tags and it is working well across all viewport dimensions. However, I want to ensure there isn't a better way to do this.

Thanks!

Answer 1

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

Example:

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