Container in container

Question

I have a bit of trouble getting a final answer on containers in bootstrap. It is clear that you should not embed .container within .container-fluid and vice versa, but is it normal to embed .container in another .container ? I am trying to create a layout that has an outer div that will have a full width and an inner div that will be smaller than the content containing box in the box. I'm not sure if the right way to do this is in bootstrap.

Answer 1

Yes, never nest a container inside another.

From Bootstrap docs:

Containers

Bootstrap requires a containing element to wrap the content of the site and build our mesh system. You can choose one of two containers for use in your projects. Please note that due to filling and more, no container is nested.

You can wrap .container inside a custom class .outer-container that is 100% wide. Set the width to about 75% while reducing the screen size to show that the inner container has a smaller width.

 .outer-container { background: tomato; width: 100%; } .container { background: lightblue; } @media (max-width: 1200px) { .container { width: 75%; } } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="outer-container"> <div class="container"> I am fixed </div> </div>