Nesting container within a container bootstrap
Yes, never nest a container inside another.
From the Bootstrap Docs:
Containers
Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.
You can wrap the .container
inside custom class .outer-container
which has 100% width. Set a width near 75% when the screen size is reduced to show that the inner container has 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>
For Bootstrap 4, containers can be nested.
Containers Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time).
While containers can be nested, most layouts do not require a nested container.
Reference:https://getbootstrap.com/docs/4.0/layout/overview/
According to Bootstrap 3 documentation
Note that, due to padding and more, neither container is nestable.
However, in Bootstrap 3 a navbar
has a .container
inside it and at the same time it can all be enveloped by a bigger .container
. So there is a .container
within a .container
and it is not a mistake. To verify that one may look at the page source here, in Bootstrap documentation: https://getbootstrap.com/docs/3.3/examples/navbar/