What's the meaning of the "row" class in Bootstrap, its difference from containers, and how does it stack with col-***-*?

Question

I'm trying to follow the guide here: http://getbootstrap.com/css/ and I just can't seem to understand what the "row" class is doing. I was trying some of the examples in the guide such as:

<div class="row">
    <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

I tried it with the row div and without it, and I was trying to place everything inside a container, and there was no difference at all, they all looked the same.

Could anyone explain what the meaning of the "row" class is ?

Answer 1

I like to think of the row as a container that can contain X many columns equal to 12. You would use the row class to separate different stacked element (columns).

The columns as you defined them col-xs-12 col-md-8 mean that on a medium sized screen and above the div will span 8/12 of the page and on a xs small screen (mobile) it will span the full 12 columns. This works with the col-xs-12 col-md-4 class because 8 + 4 = 12.

If your entire site is split this way (8/12 and 4/12) then all you really would need is one row! Other wise you'd create another row for different column width. An example would be:

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-8"></div>
        <div class="col-xs-12 col-sm-4"></div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-4"></div>
        <div class="col-xs-12 col-sm-2"></div>
        <div class="col-xs-12 col-sm-6"></div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-3"></div>
        <div class="col-xs-12 col-sm-3"></div>
        <div class="col-xs-12 col-sm-3"></div>
        <div class="col-xs-12 col-sm-3"></div>
    </div>
</div>

The container class is used to create a nice margin around your entire site, but if you have a portion of your site you want to span across the entire width, you would need to close the container and create a container-fluid class. Then create another container to get the margin back. Hope that all makes since! Just how I think about it as.

Answer 2

In Bootstrap, the "row" class is used mainly to hold columns in it. Bootstrap divides each row into a grid of 12 virtual columns. In the following example, the col-md-6 div will have the width of 6/12 of the "row"s div, meaning 50%. The col-md-4 will hold 33.3%, and the col-md-2 will hold the remaining 16.66%.

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