Bootstrap grid

Documentação Completa

Responsividade do grid

1
2
3
4
5
6
7
8
9
10
11
12
            <div class="row">
    <div class="col coll">1</div>
    <div class="col coll">2</div>
    <div class="col coll">3</div>
    <div class="col coll">4</div>
    <div class="col coll">5</div>
    <div class="col coll">6</div>
    <div class="col coll">7</div>
    <div class="col coll">8</div>
    <div class="col coll">9</div>
    <div class="col coll">10</div>
    <div class="col coll">11</div>
    <div class="col coll">12</div>
</div>

Tamanhos equalizados

1 of 2
2 of 2
1 of 3
2 of 3
3 of 3 
            <div class="row">
    <div class="col coll">
        1 of 2
    </div>
    <div class="col coll">
        2 of 2
    </div>
</div>
<div class="row">
    <div class="col coll">
        1 of 3
    </div>
    <div class="col coll">
        2 of 3
    </div>
    <div class="col coll">
        3 of 3
    </div>
</div>

Uma coluna com tamanho fixo

1 of 3
2 of 3 (Fixo de 6)
3 of 3
1 of 3
2 of 3 (Fixo de 5)
3 of 3 
            <div class="row">
    <div class="col coll">
        1 of 3
    </div>
    <div class="col-6 coll">
        2 of 3 (Fixo de 6)
    </div>
    <div class="col coll">
        3 of 3
    </div>
</div>
<div class="row">
    <div class="col coll">
        1 of 3
    </div>
    <div class="col-5 coll">
        2 of 3 (Fixo de 5)
    </div>
    <div class="col coll">
        3 of 3
    </div>
</div>

Breakpoints

col BreakPoint pequeno
col BreakPoint pequeno
col BreakPoint pequeno
col BreakPoint pequeno
col-8 BreakPoint Médio
col-4 BreakPoint Médio
        <div class="row">
    <div class="col-sm coll">col BreakPoint pequeno</div>
    <div class="col-sm coll">col BreakPoint pequeno</div>
    <div class="col-sm coll">col BreakPoint pequeno</div>
    <div class="col-sm coll">col BreakPoint pequeno</div>
</div>
<div class="row">
    <div class="col-md-8 coll">col-8 BreakPoint Médio</div>
    <div class="col-md-4 coll">col-4 BreakPoint Médio</div>
</div>