Nesting a container class inside a container-fluid class in Bootstrap 3?

Question

Aside from the padding issue, why is it not advisable to nest .container in .container-fluid?

If you zero the child container padding (as shown in my code below), the effect is the same as having one container anyway. Also, it seems that having varying full and fixed width layout is pretty common these days. I know what the documentation says (LINK), but I am curious if anyone knows of anything other than the padding issue that warrants this implementation not being recommended. Is it the additional markup or something else I am missing?

The reason I ask is that I have this implemented on a number of sites recently and seen no apparent problems with it in the testing that I have done. I am wondering if there are some other potential problem(s) lurking that would be cause for me to consider stopping this practice.

CSS

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

HTML

<div class="container-fluid" style="background-color:aliceblue;">
    <div class="row">
        <div class="col-xs-12">
            <div class="container">
                <div class="row">
                    <div class="col-xs-6" style="background-color:violet">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
                    <div class="col-xs-6" style="background-color: lightblue">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
                </div>
            </div> 
        </div>
    </div>
    <div class="row">
      <div class="col-xs-4" style="background-color:pink">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
      <div class="col-xs-4" style="background-color: red">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
      <div class="col-xs-4" style="background-color:blue">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
    </div>
</div>

Example on Bootply

Answer 1

After researching this issue, I think I have a good answer to this question. Based on what I have found, it appears that the Bootstrap documentation and the examples on the Bootstrap website contradict the recommendation that the container classes cannot be nested. This is acknowledged in the repo as well. So it appears that the recommendation in the documentation about nesting containers and resulting padding issue caused by nested containers is the only real concern with this problem, as I have found no other issues with it.

In the repo I found another potential solution that recommended altering margins on nested containers. But I think my solution of zeroing out the child container padding, as outlined in this initial question, is a bit more practical and straight forward since no additional markup is needed to achieve the desired affect. I will include the margins solution from the repo here for reference. It basically involves adding a fixed class to the parent container then applying negative left and right margins on every nested container within the parent. Note that this solution does not apply to instances of containers nested in container-fluid. Only to containers nested in other containers.

---

CONTAINERS NESTED IN CONTAINERS

HTML

<div class="container fixed">
  <div class="container">
    <div class="container">
      <div class="container"></div>
    </div>
  </div>
</div>

CSS

.container.fixed .container {
    margin-left: -15px;
    margin-right: -15px;
}

Example on Bootply

---

CONTAINERS NESTED IN CONTAINER-FLUID

CSS

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

HTML

<div class="container-fluid" style="background-color:aliceblue;">
    <div class="row">
        <div class="col-xs-12">
            <div class="container">
                <div class="row">
                    <div class="col-xs-6" style="background-color:violet">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
                    <div class="col-xs-6" style="background-color: lightblue">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
                </div>
            </div> 
        </div>
    </div>
    <div class="row">
      <div class="col-xs-4" style="background-color:pink">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
      <div class="col-xs-4" style="background-color: red">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
      <div class="col-xs-4" style="background-color:blue">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
    </div>
</div>

Example on Bootply

---

To conclude, although it is not recommended, it is easily possible to nest containers and in the right context it can actually be useful, such as in instances where a layout has varying fixed and full width content. But careful consideration and adjustments must be made to account for the padding issue that arises from nesting containers.