CODEWITHSUNDEEP
twitter-bootstrap
Hunter Nelson
Hunter Nelson

Reputation: 1995

Nesting container within a container bootstrap

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.

Upvotes: 10

Views: 15599

Answers (3)

fishstick
fishstick

Reputation: 2274

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/

Upvotes: 6

m4n0
m4n0

Reputation: 32355

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>

Upvotes: 8

A.N.
A.N.

Reputation: 51

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/

Upvotes: 2

Related Questions