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

Question

Besides the filling problem, why is it not recommended to embed the .container-fluid container?

If you are zero filling the child container (as shown in my code below), the effect will be the same as one container. Also, it seems that these days are quite different in full and fixed widths. I know what the documentation says ( LINK ), but I'm curious if anyone knows about anything other than a padding problem that ensures that this implementation is not recommended. Is this additional markup or something else that I am missing ?

The reason I ask is because I recently implemented this on several sites and did not see any obvious problems with it in the testing that I did. I wonder if there is any other potential problem (s) that could serve as a reason to consider 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> 

Bootply example

Answer 1

After studying this problem, I think I have a good answer to this question. Based on what I found, it looks like the Bootstrap Documentation and the Bootstrap website contradict that the container classes cannot be nested. This is confirmed in the repo. It seems that the recommendation in the documentation for nesting containers and the add problem caused by nested containers is the only real problem with this problem, since I did not find any other problems with it.

In the repo, I found another potential solution that recommended changing fields on nested containers. But I think that my decision to refuse to fill the child container, as described in this initial question, is a little more practical and straightforward, since additional markup is not required to achieve the desired effect. I will include the field solution from the repo here for reference. This is mainly due to adding a fixed class to the parent container, and then applying a negative field to the left and right on each nested container in the parent. Note that this solution does not apply to instances of containers nested in a container-liquid. Only for containers nested in other containers.

---

CONTAINERS FORBIDDEN 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; } 

Bootply example

---

CONTAINERS FORBIDDEN IN THE CONTAINER-LIQUID

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> 

Bootply example

---

In conclusion, although this is not recommended, it is easy to nest containers and in the right context it can be really useful, for example, in cases where the layout has different fixed and full-sized contents. But it is necessary to carefully study and make adjustments to take into account the filling problem arising from containers for nesting.