Ive been using bootstrap for a few months and am looking to clarify something as part of best practices.
My question is do I create a container for each row or just one big container for the whole page.
Example1 (Closed Containers)
<div class="container">
<div class="row">
<div class="span8 offest2">
<h1>Content</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span8 offest2">
<h1>More Content</h1>
</div>
</div>
</div>
Example 2 (1 large container)
<div class="container">
<div class="row">
<div class="span8 offest2">
<h1>Content</h1>
</div>
</div>
<div class="row">
<div class="span8 offest2">
<h1>Content</h1>
</div>
</div>
</div>
Any help appreciated, just dont want to get into bad habits early on
Containers are the most basic layout element in Bootstrap and are required when using our default grid system. Containers are used to contain, pad, and (sometimes) center the content within them. While containers can be nested, most layouts do not require a nested container.
The .container class provides a responsive fixed width container. The .container-fluid class provides a full width container, spanning the entire width of the viewport.
Use .container-fluid for a full width container, spanning the entire width of the viewport.
Since Bootstrap is developed to be mobile first, we use a handful of media queries to create sensible breakpoints for our layouts and interfaces. These breakpoints are mostly based on minimum viewport widths and allow us to scale up elements as the viewport changes.
Multiple rows can logically be part of the same grid, like rows in a table. The .container represents one grid. So Example 2 would be the way to go.
I would recommend the second example. In the first you have duplicate code wich makes no real sense. Always think about the principle "Don't repeat yourself".
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