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

Question

I have just started learning bootstrap from https://www.w3schools.com/bootstrap/default.asp website. In the website it is stated that .container-fluid and .container classes have to be used for grid system i.e. only when we have rows and columns. But all the code snippets of the "navigation bar" section on that website uses .container-fluid class even when no rows and columns are used.The navigation bars are created using ul(unordered list). Following is one example:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

So here is the question:Where can I use .container-fluid class? Can I apply .container-fluid to the complete body of my page?

You can use `.container-fluid` anytime you need a full width container spanning the entire width of your viewport. — MarioZ, Jun 22 '17 at 14:54

score 0 · Accepted Answer · answered Jun 22 '17 at 15:15

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.

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

1 Answers1