BootStrap 3 container inside container-fluid

Question

Below is the Layout that I am working on using BootStrap3. I have setup example with limited layout for this question at http://jsfiddle.net/s7Rwj/4

Answer 1

I actually see no problem with using the Bootstrap container nested in the container-fluid. I did this recently in a theme I built that uses a page builder. This allowed the client to easily build pages with varying fixed and full width rows using the page builder.

Just add something like this to your stylesheet:

.container-fluid .container {
    padding-left:0;
    padding-right:0;
}

That said, I think what you are attempting may be solved by adding some padding-top to the first column in the container-fluid. To make it mobile specific, add that padding in a media query at the breakpoint where the text begins to overlap. That's not the prettiest way of doing it, but that's how I would approach it given what you are trying to accomplish.

<header class="container-fluid navbar-fixed-top">
    <div class="row">
        <div class="col-xs-12" style="background-color:aliceblue; padding-top:30px;">
            <div class="container">
                <div class="row">
                    <div class="col-xs-6" style="background-color:violet">2</div>
                    <div class="col-xs-6" style="background-color: lightblue">3</div>
                </div>
            </div> 
            <span style="position:absolute;top:0;left:0">
                        Some text
            </span>
        </div>
    </div>
</header>

LINK: http://jsfiddle.net/udLbLwh6/

Answer 2

I believe nesting containers is perfectly fine. As long as you remove the padding on the .container inside of .container-fluid (.container-fluid .container {padding: 0;}), then what else is not okay about it?

Answer 3

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.