Must Bootstrap Container Elements Include Row Elements

Bootstrap - should each row have container as immediate parent?

It depends on the Bootstrap version, and how you want the content aligned, but generally containers are required...

Version 3.x

"Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding."

Version 4.x

"Containers are the most basic layout element in Bootstrap and are
required when using our default grid system."

The top level element of the grid system is the .row, and therefore row's should be the immediate child of a container. Bootstrap 4 is more flexible in that rows & columns can be created without gutters, and the spacing utils can be used to adjust padding and margins.

When should I use container and row in 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.

Bootstrap Grid, do I need a container?

Update Bootstrap 4

Outermost rows should also be wrapping in container or container-fluid in Bootstrap 4 to prevent horizontal scolling caused by negative margins on the .row.

Bootstrap 3

You should wrap row in container or you'll have a problem with the negative margins that BS 3 uses for the row element. Basically the row is designed to be within a container. Read more on the Bootstrap grid

Play with this example on Bootply: http://bootply.com/83751

Must Bootstrap Container Elements Include Row Elements

Bootstrap - should each row have container as immediate parent?

When should I use container and row in Twitter Bootstrap?

Jumbotron example

Bootstrap Grid, do I need a container?

Related Topics

Leave a reply