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>

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>

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

Read this article for a complete explanation.

Bootstrap 3 Adding a container-fluid inside a container?

You cannot use .container-fluid inside of a .container and get what you're trying to achieve. Look at the code for Bootstrap's .container class; it has a fixed width.

You need to use .container-fluid OUTSIDE of the fixed-width container.

An example is below:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <p>Some Content</p>
        </div>
    </div>
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <p>Item 1</p>
        </div>

        <div class="col-md-4">
            <p>Item 2</p>
        </div>

        <div class="col-md-4">
            <p>Item 3</p>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <p>Some More Content</p>
        </div>
    </div>
</div>

It's perfectly acceptable to have multiple containers throughout the site, wherever you need to make use of a Bootstrap Grid.

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.

Bootstrap 3 container within container-fluid

Yes.

.container can be used with .container-fluid to give you better possibilities on styling your header's background.

Since the fluid container itself does not have much styling on it, you can use it to divide different parts of the page vertically. Adding an extra class or an ID to it gives you a bit of freedom when it comes to applying CSS-styling on it.

It should not cause any issues except when you go to mobile view, you should maybe tick off the padding from .container-fluid if you want to fill the page's width with your header.

Fluid Container in Bootstrap 3