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

I am having hard time setting up my header. I am using container-fluid width so my Header's width is 100% however the ask is that out of three elements inside header one should stay to left and rest of the two should match left and right respectively of the below "container".

So far I have tried various layouts but below is the only one which is close to what I am looking for.

    <header class="container-fluid navbar-fixed-top">
        <div class="row">
            <div class="col-xs-12" style="background-color:aliceblue">                    
                <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>
                </div>
                <span style="position:absolute;top:0;left:0">
                    A quick brown fox jumps over the lazy dog.
                </span>
            </div>
        </div>
    </header>

However challenge with this layout is that since the span is using absolute position when the browser is re-sized the text overlaps the second element inside header. I have already tried providing explicit width to it but it didn't help.

If I don't use absolute position then the span and rest of the items are rendered in two different lines.

I am looking for advice on how to setup this header.

PS: I have added random background colors to div tag to understand where they are getting rendered. Feel free to ignore them.

Answer 1

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 2

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 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.