Question

I think this can be a dumb question, but I don’t understand the usage of the .row class from Twitter Bootstrap. So, what is it used for?

I’m trying to do something like this in this structure:

LOGO
SUB-MESSAGE
MENU 1  | MENU 2  | MENU 3  | MENU ...
CONTENT                                            | ADS
CONTENT                                            | ADS
CONTENT                                            | ADS
CONTENT                                            | ADS
...                                                | ...

What should be a basic structure for this and where the row is needed?

Answer 1

The bootstrap translated the use of normal table rows, <tr>, into a more semantic building block that you can use to layout your design, and with that they also translated the table data blocks, <td>, into the .span* classes you use to separate content with, which is called a grid. Basically, you can think of a row as a horizontal container which you can fill with building blocks, the span tags, that you later can stack above or below other rows to create a layout.

So, to illustrate your layout, you can use a stack of rows like this:

<row>
    <span>LOGO</span>
    SUB-MESSAGE
</row>

<row>
    <span>MENU 1  | MENU 2  | MENU 3  | MENU ...</span>
</row>

<row>
    <span>CONTENT</span>                               | <span>ADS</span>
    <span>CONTENT</span>                               | <span>ADS</span>
    <span>CONTENT</span>                               | <span>ADS</span>
    <span>CONTENT</span>                               | <span>ADS</span>
</row>

Notice how the rows separate different levels of content that you wish to have separated. You can find more information on the usage of the grid system over at the bootstrap scaffolding documentation, they also have a stacked grid which you can view the source off to get an idea of how the rows are stacked up and how the content within are put together.