Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Twitter Bootstrap Containers

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

like image 786
Richlewis Avatar asked Jun 26 '12 08:06

Richlewis


People also ask

Should I use container in Bootstrap?

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.

What is the difference between container and container-fluid?

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.

How do I create a full width container in Bootstrap?

Use .container-fluid for a full width container, spanning the entire width of the viewport.

Do I need media queries with Bootstrap?

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.


2 Answers

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.

like image 92
Gregor Avatar answered Nov 17 '22 11:11

Gregor


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".

like image 29
HaNdTriX Avatar answered Nov 17 '22 12:11

HaNdTriX