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 e

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

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

    

        

            

                

                    
Use this document as a way to quickly start any new project.
 All you get is this text and a mostly barebones HTML document.
                    
Use this document as a way to quickly start any new project.
 All you get is this text and a mostly barebones HTML document.
                
            
 
        
    
    

      
Use this document as a way to quickly start any new project.
 All you get is this text and a mostly barebones HTML document.
      
Use this document as a way to quickly start any new project.
 All you get is this text and a mostly barebones HTML document.
      
Use this document as a way to quickly start any new project.
 All you get is this text and a mostly barebones HTML document.
    

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.