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 .container-fluid and visa versa, but is it ok to nest a .container within another .container? I am trying to create a layout that has an outer div that will be full width and an inner div that will be smaller that holds content, a box within a box. I'm not sure what the proper way to do this in bootstrap is.

Answer 1

Edit:

According to v4 docs, it can be nested but you do not require it in most cases: Bootstrap v4 layout doc

---

Yes, never nest a container inside another.

From the Bootstrap v3 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 a smaller width.

.outer-container {
  background: tomato;
  width: 100%;
}
.container {
  background: lightblue;
}
@media (max-width: 1200px) {
  .outer-container .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 2

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/