Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Sergi Beltran
Sergi Beltran
18,493 Points

Nesting columns in Bootstrap 3

Hi everyone, I would like to ask if would be correct the next code for nesting columns in Boostrap 3. I would like to remove the class .row

I'm trying to put columns into colums without the class .row between. At the moment the result is what I expect, but I don't know if in the future it will be a headache for me.

This is a example:

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

What do you think?

3 Answers

Kevin Korte
Kevin Korte
28,149 Points

It's pretty simple what it's doing. The col classes have a padding left and right of 15px. This gives your content a little breathing room inside their div while still allowing things like backgrounds and borders to respect that breathing room space.

The row class has a negative margins of 15px. What does this do? It cancels out the 15px padding of the col classes. This allows the column classes to span the complete width of the container class minus it's 15px padding. Essentially you'll be left with a 15px padding from the container to the col divs. Eliminating the row means you'll end up with a 30px padding; your content will be narrower.

There is one more thing the row class does, it acts as a clearfix since the col divs are floated. So if you go sans row class, be aware you either need to deal with or accept the larger padding between container and col, or deal with it in another way, and also be on the lookout for collapsing divs that only contain floated cols. You may need to put a clearfix on them.

Bootstrap actually uses Nicolas Gallagher's micro-clearfix. The code is found here: http://nicolasgallagher.com/micro-clearfix-hack/

bobkingstone
bobkingstone
27,869 Points
bobkingstone
bobkingstone
27,869 Points

Hi

Reading the documentation it does state that you should include a row div, if the developers have included this then I would say stick with it. otherwise you risk unexpected results.

Bob

Sergi Beltran
Sergi Beltran
18,493 Points
Sergi Beltran
Sergi Beltran
18,493 Points

Thanks everyone. I'll avoid troubles if I respect the documentation from Bootstrap.

I've seen the problems with paddings and I prefer avoid hacks.

Bye!