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

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%;
  }
}

  

    I am fixed