When should I use container and row in Twitter Bootstrap?

Twitter Bootstrap Twitter Bootstrap-3 Bootstrap 5

Twitter Bootstrap Problem Overview

Please explain to me when to use the classes container and row. I'm not sure because the documentation of Bootstrap is quite unclear about this part.

I'm using Bootstrap 3.

Twitter Bootstrap Solutions

Solution 1 - Twitter Bootstrap

container is a container of row elements.

row elements are containers of columns (the docs call it grid system)

Also, container sets the content's margins dealing with the responsive behaviors of your layout.

Thus the container class is often used to create 'boxed' contents based on the style guidelines of the Bootstrap project.

If you want to go "out of the box" creating a full width grid you can use only row elements with columns inside (spanning the usual 12cols total).

The container and row classes are for elements inside the body. So a basic layout would be:

<html>
 <body>
  <div class="container">
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
   <div class="row">
     <div class="col-md-xx"></div>
       ...
   </div>
  </div>
 </body>
</html>

For a boxed responsive layout.

If you omit the container you'll get a full-width layout.

Jumbotron example

Jumbotron is a good example of the container behavior. If you put a Jumbotron element in a container element it has rounded borders and a fixed width based on the responsive width. If the Jumbotron is outside a container, it spans full-width without borders.

Solution 2 - Twitter Bootstrap

I was wondering about the same and to understand that I went through the bootstrap.css of version 3. The answer lies in from line no. 1585 to 1605. I'll post those lines here for better understanding as below.

.container
{
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

Whole of the code is self explanatory. However, to elaborate on this, container would take 750px if screen width is between 768px and 992px and so forth as the code shows. Now, for common screen resolution of more than 1200, container would take 1170px, but subtracting the padding of 30 px (15px+15px), the effective space left is 1140px, which is centered on the screen as the margin of left and right is set to auto.

Now, in case of class="row", there is below code:

.row {
  margin-right: -15px;
  margin-left: -15px;
}

So, if row is inside the container, it would effectively snatch the padding of 15px each side from the container and use the full space. But if the class row is inside the body tag, it would tend to move out of the visible area into both the left and right side of the browser due to negative margins.

I hope it was made clear.

Solution 3 - Twitter Bootstrap

Class 'container' wraps the content within to center of view port. Entire content with in body tag can be placed in

results the page displayed of specified width in center of page.

Class 'row' is used when you need to place content in columns with in a row, you can have upto 12 columns in total in each row.

Solution 4 - Twitter 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 containers 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.

Solution 5 - Twitter Bootstrap

In the traditional CSS practices you would probably use the following classes:

wrapper, header, navigator, contents, footer

the usage of the above classes can be like this example:

<body>
    <div class="wrapper">
        <div class="header">

        </div>
        <div class="navigator">

        </div>
        <div class="content">

        </div>
        <div class="footer">

        </div>
    </div>

</body>

In bootstrap you can use if you wish or if you are used to the above template the bootstrap classes like this example:

<body>

    <div class="container">
        <div class="col-md-12">
            <h1>Header</h1>
            <p>Header contents goes here</p>
        </div>
        <div class="col-md-12">
            <nav role="navigation" class="nav navbar">
                <h1>Navigation</h1>
                <p>Navigation contents goes here</p>
            </nav>
        </div>
        <div class="col-md-12">
            <div class="pagination">
                <h1>Page contents</h1>
                <p>Webpage contents goes here</p>
            </div>

        </div>
        <div class="col-lg-12">
            <h1>Footer contents</h1>
            <p>footer contents goes here</p>
        </div>
    </div>

</body>

For the row class you can use row class when you want to design tabular layout for the page, but when you want to display data in table format you should use table class, but the table will not be responsive.

To create tabular layout which different from data tables use the row class like in this example:

<body>

<div class="container">
    <div class="row">
    <div class="col-sm-4" >.col-sm-4</div>
    <div class="col-sm-4" >.col-sm-4</div>
    <div class="col-sm-4" >.col-sm-4</div>
  </div>
</div>

</body>

You must try to avoid using table-based layout and try to use responsive tables like described here

Solution 6 - Twitter Bootstrap

Update 2021

For the benefit of future readers, the Bootstrap Grid (container/row/col) has evolved since this question was asked originally for Bootstrap 3. However, many concepts and "rules" still apply:

"Containers are the most basic layout element in Bootstrap and are required when using our default grid system."
"Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins to ensure the content in your columns is visually aligned down the left side. "

Therefore...

1 - Use a container or container-fluid to contain the entire page layout. You can put any content (text, images, headings) inside the container. Bootstrap 5 now provides additional responsive containers.

2 - If you want a multi-column layout use the Grid. The grid consists of at least 1 row with 1 or more columns (col*) inside it. You can put more than 12 columns in a single row. The only reason to use separate rows would be to create a new horizontal division.

Never...

Use a col-* without a row as it's immediate parent.
Place content directly inside the row.

Content Type	Original Author	Original Content on Stackoverflow
Question	CodeShark	View Question on Stackoverflow
Solution 1 - Twitter Bootstrap	Paolo Casciello	View Answer on Stackoverflow
Solution 2 - Twitter Bootstrap	user5173334	View Answer on Stackoverflow
Solution 3 - Twitter Bootstrap	code2use	View Answer on Stackoverflow
Solution 4 - Twitter Bootstrap	Mistalis	View Answer on Stackoverflow
Solution 5 - Twitter Bootstrap	Ashraf Sada	View Answer on Stackoverflow
Solution 6 - Twitter Bootstrap	Zim	View Answer on Stackoverflow