CODEWITHSUNDEEP
csstwitter-bootstraprownested
Slake
Slake

Reputation: 2160

Bootstrap - Best practices on nesting - rows & spans

What's the best way to use nesting.

Multiple spans inside row - dynamic content :

Sample case n°1 - which one is the best & why ? : 

<div class="row">
    <span class="span6"></span>
    <span class="span6"></span>
    <span class="span6"></span>
    <span class="span6"></span>
</div>

Or 

<div class="row">
    <div class="span6"></div>
    <div class="span6"></div>
</div>
<div class="row">
    <div class="span6"></div>
    <div class="span6"></div>
</div>

Sample case n°2 - More levels to organise the content.

Here, use the div "my_margin" to add some margin at left & right - and you must have "first_row" around it.

So it's : row-->span10,offset1-->row-->SPANS

<div id="first_row" class="row">
    <div id="my_margin" class="span10 offset1">
        <div class="row">
            <div class="span6"></div>
            <div class="span6"></div>
            <div class="span6"></div>
            <div class="span6"></div>
        </div>
    </div>
</div>

Or,

You shouldn't use the span10,offset1 but direct margin;

In that case, you must create rules for each @Media_size to make it responsive.

<div style="margin-right:XYpx; margin-left:XYpx" class="row">
    <div class="span6"></div>
    <div class="span6"></div>
    <div class="span6"></div>
    <div class="span6"></div>
</div>

Or - Spans are 'supposed' to be use for your main contents, and then you just play with css. So, something like that :

<div row>
    <div class="span6">
        http://jsfiddle.net/JkPhw/
    <div class="span6">
    <div class="span6">
        http://jsfiddle.net/JkPhw/
    <div class="span6">
</div>

Upvotes: 2

Views: 3477

Answers (1)

Seimen
Seimen

Reputation: 7250

To case n°1:

It depends, if you have for example a list of nine teasers where three teasers fill a line, I'd do it with one row:

<ul class="row">
    <li class="span4"></li>
    <li class="span4"></li>
    <li class="span4"></li>
    <!-- six more -->
</ul>

If you're using the grid for layouting a form, I'd make a row for each label-input pair:

<!-- one label-input pair does not fill the whole content width -->
<form>
    <div class="row">
        <label class="span3"></label>
        <input class="span5" />
    </div>
    <div class="row">
        <label class="span3"></label>
        <input class="span5" />
    </div>
    <!-- and so on -->
</form>

I think you shouldn't make a grid and put your content in the different grid cells to layout it, but build semantically correct markup and apply the grid to layout the content (tiny difference).

PS: keep box-sizing in mind.

To n°2:

I don't quite get the idea there, if you're using the grid, you shouldn't apply left/right-margin to it. The grid depends on its horizontal margins to work properly... if you have to change this to match your frontend with the design it's probably not in the grid anymore.

Update: I'd most certainly use your first example though, if you have smaller content. But use the correct grid span widths:

<article class="row">
    <header class="span12"></header>
    <div class="span10 offset1">
        <div class="row">
            <div class="span5"></div>
            <div class="span5"></div>
        </div>
    </div>
</article>

Upvotes: 1

Related Questions