Menu
I'm trying to figure out Bootstrap 3 and having lots of trouble. The Bootstrap 3 site says:
Easily center a page's contents by wrapping its contents in a .container. Containers set width at various media query breakpoints to match our grid system.
Note that, due to padding and fixed widths, containers are not nestable by default.
The former line seems to support this, as I wouldn't want nested containers to re-set the width to more than the parent. That latter line makes me think that I should only have one container on a page (or siblings at most), regardless of fluid/normal/etc., without doing something "extra".
Is that correct?
662
While containers can be nested, most layouts do not require a nested container. Bootstrap comes with three different containers: . container , which sets a max-width at each responsive breakpoint.
Containers are used to pad the content inside of them, and there are two container classes available: The . container class provides a responsive fixed width container.
Bootstrap comes with three different containers: .container , which sets a max-width at each responsive breakpoint. .container-fluid , which is width: 100% at all breakpoints. .container-{breakpoint} , which is width: 100% until the specified breakpoint.
Its is not illegal to use multiple containers. You can use as many as you want. e.g if you want to have multiple sections on a page with different background image or color, you can use sections and within each section you can use a 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)!
144
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
