Differences Between Container, Row and Span in Bootstrap

Differences between container, row and span in Bootstrap

In general you would use container > row > span

I can't think of an example where the the other 2 options you ask about would break anything, but they may not give you the results you want.

Wrapping everything in the conatiner div will manage the width of the page and side padding. Using the row div will ensure that your spans are layed out the way you want. For example imagine 2 rows that each have just have a single span4. If you don't use the row div the 2 span4s will float one next to the other instead of being stacked vertically.

There are many cases where you will have nested containers in a Bootstrap layout, the first one you will likely come across is in the nav bar, and once you start using fluid Bootstrap layouts you will see that container divs are not always 940px, but if you stick to the container > row > span arrangement it will save you some grief, especially if you are just starting.

Good luck!

Bootstrap difference between col and row in first class and empty cell with padding

The first one is right, the second is not.

This is due to how bootstrap works.

First of all you create a row and inside it you can put columns. By design, bootstrap divides the screen into 12 columns you can arrange the way you want, just like you are doing with col-md-6. That means that, on the average monitor, that column would take 6 columns out of the default 12. In other words, the 50% of the width (more or less).

The second example you posted is wrong simply because those classes do not exist inside bootstrap and wouldn't work at all.

Take a look at the official bootstrap documentation about the grid system that is the base of the whole bootstrap framework.

About the second part of your question, the col-md-3 collapses if it has nothing inside it. Usually, if a need an empty column, i just put inside it and solves the problem for me. Or, even better, you should check out column offsets.

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

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>

What is the purpose of .row in Bootstrap?

Container

The container provide the width constraints on responsive widths. When the responsive sizes change, it’s the container that changes. Rows and columns are all percentage based so they don’t need to change.
Note that there is a 15px margin on each side, canceled by rows.

Rows

Rows should always be in a container.

The row provides the columns a place to live, ideally having columns that add up to 12. It also acts as a wrapper since all the columns float left, additional rows don’t have overlaps when floats get weird.

Rows also have a 15px negative margin on each side. The div that makes up the row would normally be constrained inside of the container's padding, touching the edges of the pink area but not beyond. The 15px negative margins push the row out over top of the containers 15px padding, essentially negating it. Furthermore, rows ensure you that all of the divs inside of it appear on their own line, separated from the previous and the following rows.

Columns

The columns now have 15px padding. This padding means that the columns actually touch the edge of the row, which itself touches the edge of the container since the row has the negative margin, and the container has the positive padding. But, the padding on the column pushes anything inside the column in to where it needs to be, and also provides the 30px gutter between columns. Never use a column outside of a row, it won’t work.

For more information, I suggest you to read this article. It is really clear, and explain well how Bootstrap's grid system works.

Row span in Bootstrap 3?

I created this because the other answer, now deleted, was so really wrong. Here is one of many ways of doing this. I use jQuery usually. This assumes that this is a responsive layout. Hopefully, I say to myself, I won't answer questions that don't have any effort put into them. If you have a desired layout pattern and you don't see it in the documentation or examples on the GetBootstrap.com website, it likely doesn't come with the framework.

DEMO: http://jsbin.com/wuwis/1/

http://jsbin.com/wuwis/1/edit

HTML:

<div class="container">
   <div class="row equal-heights">
      <div class="col-sm-6">
         Primary Box put something in here that will accomodate the height of the other two boxes
      </div>
      <!--/.col-X-6 -->
      <div class="col-sm-6">
         <div class="box">
            Secondary Box
         </div><!--/.box -->
         <div class="box">
            Tertiary Box
         </div><!--/.box -->
      </div>
      <!--/.col-X-6 -->
   </div>
   <!--/.row -->
</div>
<!--/.container -->

CSS:

.row.equal-heights [class*="col-"] {
    border: 1px solid red;
    padding:0;
}
.box {
    border: 1px solid green
}
@media (min-width:768px) { 
    .row.equal-heights {
        width: 100%;
        margin: 0 auto;
        height: 600px;
        display: table;
        /* unless you have content that keeps this open */
    }
    .row.equal-heights [class*="col-"] {
        height: 100%;
        float: none;
        display: table-cell;
    }
    .row.equal-heights .box {
        height: 50%
    }
}

Boostrap Flex: What is the difference between row and flex-row, flex-sm-row, etc

Short Answer - .row is only a container for grid col. However, flex-row, flex-column, etc.. can be used for any flexbox elements (not just the grid rows and columns).

Long Answer

The flexbox direction utility classes can be used to responsively change the direction of flexbox children (regardless of the children being grid columns or other content). There are 4 flexbox directions:
row, row-reverse, column and column-reverse

For example, a flexbox parent <div> that contains 4 child <span> elements. You can make the children column direction on xs, row direction on sm and up:

<div class="d-flex flex-sm-row flex-column">
    <span>1</span>
    <span>2</span>
    <span>3</span>
    <span>4</span>
</div>

Of course they can also be used to override the default flex row direction of the grid .row. For example, reverse the column order on lg and up:

<div class="row flex-lg-row-reverse">
    <div class="col-sm-4">1</div>
    <div class="col-sm-4">2</div>
    <div class="col-sm-4">3</div>
</div>

Demo: https://www.codeply.com/go/sSgebPyncz

Another way to look at it:

These classes are used to responsively control column width:

col-12, col-lg-4, col-md-5, etc...

These classes are used to responsively control flexbox direction:

flex-row, flex-column, flex-md-row-reverse, etc...

What is the usage of the row class from Bootstrap?

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.

Bootstrap multiple rows of spans in a row-fluid

Well the displacement is caused by a margin-left.

It's not ideal but you could always override the CSS:

.container-fluid .row-fluid [class*="span"] {
    margin-left:0px;
}

Acutally though, the error seems to lie in the fact that you've declared 12 span3 DIVs, which adds up to a total of 36. 12 is the limit for a fluid container, so you'd need to make those span1:

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span1">1
        </div>
        <div class="span1">2
        </div>
        <div class="span1">3
        </div>
        <div class="span1">4
        </div>
        <div class="span1">5
        </div>
        <div class="span1">6
        </div>
        <div class="span1">7
        </div>
        <div class="span1">8
        </div>
        <div class="span1">9
        </div>
        <div class="span1">10
        </div>
        <div class="span1">11
        </div>
        <div class="span1">12
        </div>
    </div>
    <div class="row-fluid">
        <div class="span3">
            1
        </div>
        <div class="span3">
            2
        </div>
        <div class="span3">
            3
        </div>
        <div class="span3">
            4
        </div>
    </div>
    <div class="row-fluid">
        <div class="span3">
            1
        </div>
        <div class="span3">
            2
        </div>
        <div class="span3">
            3
        </div>
        <div class="span3">
            4
        </div>
    </div>
</div>

See here:

http://jsfiddle.net/7Lu43/51/

Differences Between Container, Row and Span in Bootstrap