Multiple and/or nested Bootstrap containers?
CssTwitter BootstrapCss 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:
- 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"?
- Would you ever want to nest "container divs" inside other ones? When/why?
Css Solutions
Solution 1 - Css
- 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.
- 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:
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.