Multiple And/Or Nested Bootstrap Containers

Multiple and/or nested Bootstrap containers?

1. Some sections of the page will span the full viewport width and others won't. Some backgrounds will be the full width but the content won't.

   An example of this is a featurette area which has a background image or color that is the full width of the viewport but the content inside that, forms or whatever, don't exceed the .container at any given viewport width.

2. You don't nest .container or .container-fluid -- see the docs. It's not necessary.

   Docs: 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 [neither means that .container and .container-fluid are NOT to be nested].

twitter-bootstrap multiple '.container's

You can use any number of '.containers' and '.container-fluid''s in a page. Beware when you are using nested '.container' since its having fixed widths at breakpoints. The examples in the bootstrap site itself have used multiple containers. So you can use..

This is well answered here: Multiple and/or nested Bootstrap containers?

Nesting container within a container bootstrap

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>

Am I only supposed to have one Bootstrap 3 container?

You are correct in that you do not want to nest the .containers. However, there are plenty of cases where you would have multiple containers. For instance, if you want to have a full width element (screen width, not container width). This is perfectly fine:

<div class="container">
  <div class="col-md-12">
    <p>Content</p>
  </div>
</div>

<div id="full-width-element">
  <p>Other content, stretching full width of the page</p>
</div>

<div class="container">
  <div class="col-md-12">
    <p>Content</p>
  </div>
</div>

Take a look at the examples on the Bootstrap site: http://getbootstrap.com/getting-started/#examples, they use multiple .containers as well.

So nesting container is not a good idea without modification or careful consideration. Using multiple containers is fine (otherwise it should have been an ID instead of a class as well)!

Bootstrap Grid System Containers / Nesting

Don't do this. A better question may be why you'd want to nest them in the first place.

The container responds to media queries with fixed widths. Everything else in Bootstrap uses percentages, which descend from this initial fixed width. When you use 2 you're going to introduce a bunch of weird effects like the padding you noticed and horizontal scrolls. You can attempt to undo these with CSS hacks but that brings us back to the question: Why do this in the first place?

I think what you might be struggling with is transitioning from typical HTML/CSS to the Grid model, which expects you to always work like this:

body
  container
    row
      col
        row
          col

And so forth, when often you'd like some intermediary non-Bootstrap tags. You can adapt to this using this class:

.box {
  float: left;
  width: 100%;
}

So that your code example can work like so:

<div class="container">
    <div id="renderbody" class=box>
        <div id="renderbody-inner" class=box>
            <div class="row">
                <div class="col-sm-6">Test</div>
                <div class="col-sm-6">Test</div>
            </div>
        </div>
    </div>
</div>

https://jsfiddle.net/b9chris/vdh8stnd/

how to fit multiple containers in a parent container

If I'm understanding your question correctly, I believe the only issue is that you've neglected to specify a height for your columns, i.e:

.col {
   height: 100%;
}

Chrome/firefox dev tools are your friend! If you press F12 you can open up the DOM inspector which allows you to view the page's elements - in this case, it was trivial enough to find what was wrong by selecting the column in the inspector and seeing that everything was the correct height except for the columns. Here's a link to the Chrome dev tools docs. I'm sure you can find something similar for firefox.

Modified snippet is below.

var swiper = new Swiper('.swiperCon1', {
  direction: 'vertical',
  slidesPerView: 2,
  spaceBetween: 5,
  scrollbar: {
    el: 'Scroll1',
    hide: true,
  },
  mousewheel: {
    invert: false,
    forceToAxis: true,
  },
});

.con {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 85%;
  height: 45%;
  background-color: black;
  position: absolute;
  top: 6%;
  left: 5%;
  z-index: 1;
  border-top-left-radius: 0%;
  border-top-right-radius: 0%;
  border: 2px solid;
  padding: 0%;
}

.row-con {
  height: 100%;
  width: 100%;
}

.col {
  height: 100%;
}

.col-con-1 {
  position: relative;
  background-color: grey;
  border-right: 2px solid red;
}

.col-con-2 {
  position: relative;
  background-color: grey;
  border-right: 2px solid red;
}

.col-con-3 {
  background-color: green;
}

.swiperCon1 {
  height: 100%;
  width: 100%;
}

.swiperWrap1 .swiper-slide {
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  background-color: black;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

  <script src="../package/swiper-bundle.min.js"></script>

</head>

<body>

  <div class="container border-primary con">
    <div class="row row-con">
      <div class="col col-con-1">
        <div class="swiper-container swiperCon1">
          <div class="swiper-wrapper swiperWrap1">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
          </div>
          <!-- Add Scrollbar -->
          <div class="swiper-scrollbar Scroll1" style="background-color: grey; right: 0%;"></div>
        </div>
      </div>
      <div class="col col-con-2">
        two of three columns
      </div>
      <div class="col col-con-3">
        three of three columns
      </div>
    </div>
  </div>

</body>

</html>

Nesting a container class inside a container-fluid class in Bootstrap 3?

After researching this issue, I think I have a good answer to this question. Based on what I have found, it appears that the Bootstrap documentation and the examples on the Bootstrap website contradict the recommendation that the container classes cannot be nested. This is acknowledged in the repo as well. So it appears that the recommendation in the documentation about nesting containers and resulting padding issue caused by nested containers is the only real concern with this problem, as I have found no other issues with it.

In the repo I found another potential solution that recommended altering margins on nested containers. But I think my solution of zeroing out the child container padding, as outlined in this initial question, is a bit more practical and straight forward since no additional markup is needed to achieve the desired affect. I will include the margins solution from the repo here for reference. It basically involves adding a fixed class to the parent container then applying negative left and right margins on every nested container within the parent. Note that this solution does not apply to instances of containers nested in container-fluid. Only to containers nested in other containers.

---

CONTAINERS NESTED IN CONTAINERS

HTML

<div class="container fixed">
  <div class="container">
    <div class="container">
      <div class="container"></div>
    </div>
  </div>
</div>

CSS

.container.fixed .container {
    margin-left: -15px;
    margin-right: -15px;
}

Example on Bootply

---

CONTAINERS NESTED IN CONTAINER-FLUID

CSS

.container-fluid .container {
    padding-left:0;
    padding-right:0;
}

HTML

<div class="container-fluid" style="background-color:aliceblue;">
    <div class="row">
        <div class="col-xs-12">
            <div class="container">
                <div class="row">
                    <div class="col-xs-6" style="background-color:violet">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
                    <div class="col-xs-6" style="background-color: lightblue">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
                </div>
            </div> 
        </div>
    </div>
    <div class="row">
      <div class="col-xs-4" style="background-color:pink">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
      <div class="col-xs-4" style="background-color: red">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
      <div class="col-xs-4" style="background-color:blue">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</div>
    </div>
</div>

Example on Bootply

---

To conclude, although it is not recommended, it is easily possible to nest containers and in the right context it can actually be useful, such as in instances where a layout has varying fixed and full width content. But careful consideration and adjustments must be made to account for the padding issue that arises from nesting containers.

Multiple container class on a single page

do we need to have the nested row to be wrapped in a container class

No.

also want to know whether having more than one container class on a page is fine and syntactically correct?

Yes, although you cannot nest containers.

If yes, what will be the difference in above example if I include the nested row in a container.

That would involve nesting containers, which as I said above is invalid.

Sidenote: Bootlint can point out most container-related usage errors.

---

Related Topics