Nesting container within a container bootstrap

Question

I\'m have a little bit of trouble getting a definitive answer on containers in bootstrap. It\'s clear that you should not nest a .container within a .con

Answer 1

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/

Answer 2

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>

Answer 3

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/