Bootstrap Grid, Do I Need a Container

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

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.

If I use .container-fluid in Bootstrap 3, does that mean I need to use grid classes?

The container-fluid is used to contain the grid (row + col-*) but can be used for other things such as headings, tables, etc..

So no, container-fluid is not a replacement for columns, it's a holder of columns. The only difference between container-fluid and container is that the container is not full-width on larger screens. The container is a fixed width that's centered with large margins on the sides. container-fluid doesn't resize, it's always 100% width. Container demo

If you want to use the responsive grid (rows and columns), you need to use container or container-fluid like this..

<div class="container-fluid">
    <div class="row">
        (one or more col-*-* here)
    </div>
</div>

Or

<div class="container">
    <div class="row">
        (one or more col-*-* here)
    </div>
</div>

Read this article for a complete explanation.

In Bootstrap 4, is it best practice to always use rows?

Basically this has been answered before: Do you need to use Bootstrap's "container" and "row" if your content is to span the whole width?

Short answer: The container can be used to directly contain content and/or the grid system of rows and cols. The row is only use to contain columns. Therefore, if you don't need a multi-column layout, there's really no reason to use the grid.

Of course the question is subjective, but I would lean toward #2 being the better practice because it achieves the same result with less markup.

Is .container-fluid/.container used only for grid system?

According to the Bootstrap site, this is the intended usage of a 'container':

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in
your projects. Note that, due to padding and more, neither container
is nestable.

Use .container for a responsive fixed width container.

Use .container-fluid for a full width container, spanning the entire
width of your viewport.

So, whether you are intentionally using it for the grid system or not you can still use one or the other as a container for your page contents (or a portion thereof). You'll get the following CSS rules either way, with some differing rules for child elements (download the source and peruse it to see):

    [both container and container-fluid] {
      padding-right: 15px;
      padding-left: 15px;
      margin-right: auto;
      margin-left: auto;
      width: [for container this is based on media query]
    }
    :before,:after {
      display: table;
      content: " ";
    }
    :after {
      clear: both;
    }

Typical usage would be on a div inside the body, not on the body itself, from my experience.

Do I have to use container or container-fluid in grid system?

container and container-fluid provide the necessary horizontal padding (15px) for the negative margins added to row.

If you put row within an element with less-than 15px horizontal padding, it will overflow horizontally.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<!-- with container -->

<div class="border container mb-2">

  <div class="row">

    <div class="col-sm border">

      One of three columns

    </div>

    <div class="col-sm border">

      One of three columns

    </div>

    <div class="col-sm border">

      One of three columns

    </div>

  </div>

</div>

<!-- no padding, this one will be messed up -->

<div class="border p-0 mb-2">

  <div class="row">

    <div class="col-sm border">

      One of three columns

    </div>

    <div class="col-sm border">

      One of three columns

    </div>

    <div class="col-sm border">

      One of three columns

    </div>

  </div>

</div>

<!-- with enough padding -->

<div class="border px-5 mb-2">

  <div class="row">

    <div class="col-sm border">

      One of three columns

    </div>

    <div class="col-sm border">

      One of three columns

    </div>

    <div class="col-sm border">

      One of three columns

    </div>

  </div>

</div>

Bootstrap layout outside of container

First of all you have to take into account Grid System Rules:

Some Bootstrap grid system rules:

• Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
• Use rows to create horizontal groups of columns
• Content should be placed within columns, and only columns may be immediate children of rows
• Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
• Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via
  
  negative margin on .rows
• Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use
  
  three .col-sm-4

So following the above rules you can achieve what you want like this:

Here a working JSFiddle fork from yours

#logo {

    position: relative;

    height: 100px;

    background: #ffd800;

}

.container {

    height: 500px;

}

.typography {

    line-height: 35px;

    font-size: 35px;

    font-weight: bold;

    padding-left: 0 !important; /*only because bootstrap are overwriting my styles*/

}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>

<div class="wrapper container-fluid">

    <header>

        <div class="row">

            <div id="logo" class="pull-left col-xs-5 bg-theme">

                <div class="row">

                    <div class="col-xs-offset-5 col-xs-7 typography">Dope

                        <br/>Text</div>

                </div>

            </div>

            <div class="col-xs-7">

                <nav class="pull-right">nav should be here</nav>

            </div>

        </div>

    </header>

    <div class="row">

        <div class="container col-xs-offset-2 col-xs-8">

            <p>Here you can put the content</p>

            <p>and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more content</p>

        </div>

    </div>

</div>

---

Related Topics