Multiple and/or nested Bootstrap containers?

CssTwitter Bootstrap

Css Problem Overview


My understanding is that all Bootstrap-styled elements must exist inside a <div class="container"> element. But sometimes I see Bootstrap examples where there are multiple "containers":

<div class="container">
    <!-- Blah, GUI stuff, blah -->
</div>

...

<div class="container">
    <!-- Blah, more GUI stuff, blah -->
</div>

My questions:

  1. When would you ever need a single HTML page with multiple "container divs"? What benefit does this offer as opposed to just putting the entire body inside one big "container div"?
  2. Would you ever want to nest "container divs" inside other ones? When/why?

Css Solutions


Solution 1 - Css

  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.

  1. 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].

Solution 2 - Css

Unlike what some have said, you can nest a container-fluid inside a container. There is even an example on the official bootstrap website:

http://getbootstrap.com/examples/navbar/

Solution 3 - Css

In the Layout section of the 4.3 docs, https://getbootstrap.com/docs/4.3/layout/overview/#containers, it now states

> While containers can be nested, most layouts do not require a nested container.

Just be aware of what others have stated about padding, etc.

Solution 4 - Css

Actually its totally depends upon the requirement of the designer.

Some times you need full width of the row ( i mean to say viewport or a strip of visible part that you can achieved without separate container class )

http://binarytheme.com/demos?theme=bootsrap-landing-page-blue

see above template example to understand

Solution 5 - Css

Save your time and switch to Css-grid the native CSS grid.

Bootstrap containers have a limitation, if you look for 12 column limitation, 10-pixel padding challenge, adding to that is not native (CSS builtin) where user need to download it to his/her machine, and on top of all that the number of dive which you need to process.

With all that in mind give it a try and switch to CSS-grid here is a good playground to start.

Now coming to the cons of CSS-grid is that still not compatible with IE.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionsmeebView Question on Stackoverflow
Solution 1 - CssChristinaView Answer on Stackoverflow
Solution 2 - CssBitByBitView Answer on Stackoverflow
Solution 3 - CssPatrick McDonaldView Answer on Stackoverflow
Solution 4 - CsstestView Answer on Stackoverflow
Solution 5 - CssFerasView Answer on Stackoverflow