If I Use .Container-Fluid in Bootstrap 3, Does That Mean I Need to Use Grid Classes

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.

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 3 container inside container-fluid

I think you're looking for difficulties where they are not.

You should avoid nesting containers (.container and .container-fluid) because they are not nestable due to their padding etc... look at Bootstrap 3 Containers overview

Also, when you are nesting columns, all you need to do is to put a new row into one of your columns and put the nested columns right into it. See Bootstrap 3 Grid system - nesting columns, here's their example:

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

The solution you're looking for with your layout is very simple. You don't necessarily need container-fluid in the header. Simply create a container for the center part above carousel and wrap it into a .wrap or any other class that you can style with width: 100%. Additionally, you can add some padding that container-fluid has.

<header class="wrap navbar-fixed-top">
    <div class="container">
        <div class="row">
            <div class="col-xs-6" style="background-color: violet;">2</div>
            <div class="col-xs-6 pull-right" style="background-color: lightblue;">3</div>
        </div>
        <span style="position:absolute;top:0;left:0">
            A quick brown fox jumps over the lazy dog.
        </span>
    </div>
</header>

And somewhere in your CSS (I recommend style.less), you can style .wrap to 100% width, though it should be default width for every div without styles.

.wrap {
    width: 100%;
}

I know this question is a lil bit older but it doesn't matter. Hope I understood your question correctly.

Fluid Container in Bootstrap 3

Bootstrap 3.0 moved to a "mobile first" approach. .container is really only there in instances where you need/want a boxy layout. but, if you exempt the div.container-fluid entirely, you're left with a fluid layout by default.

for example, to have a two-column fluid layout, simply use:

<body>
  <header>...</header>
  <div style="padding:0 15px;"><!-- offset row negative padding -->
    <div class="row">
      <div class="col-md-6">50%</div>
      <div class="col-md-6">50%</div>
    </div>
  </div>
  <footer>...</footer>
</body>

---

Related Topics