O sistema de grids inclui um padrão de colunas responsivas que funciona adequadamente em escalas de até 12 colunas, adaptando-se ao tamanho dos principais dispositivos do mercado. Ele inclui classes pré-definidas para as opções de layout simples, bem como classes poderosas para a geração de layouts mais semânticos.

Utilize as media queries a seguir para criar declarações responsivas em conjunto com o sistema de grids.

/* Extra small devices (phones, up to 480px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }

Você pode ocasionalmente expendir essas chamadas e incluir a propriedade max-width para limitar o seu CSS para dispositivos específicos.

@media (max-width: 767px) { ... }
@media (min-width: 768px) and (max-width: 991px) { ... }
@media (min-width: 992px) and (max-width: 1199px) { ... }
@media (min-width: 1200px) { ... }

Veja como o sistema de grids trabalha de acordo com os formatos de tela dos dispositivos:

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Max container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Max column width Auto 60px 78px 95px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets N/A Yes
Column ordering N/A Yes

O sistema de grids inclui um padrão de colunas responsivas que funciona adequadamente em escalas de até 12 colunas, adaptando-se ao tamanho dos principais dispositivos do mercado. Ele inclui classes pré-definidas para as opções de layout simples, bem como classes poderosas para a geração de layouts mais semânticos.

Usando um único conjunto de classes col-md-*, Você pode criar um sistema de grids básico que começa empilhado em dispositivos móveis e tablets (o extra pequeno para pequeno) antes de se tornar horizontal na área de trabalho de dispositivos médios e grandes.

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

Atenção! Primeiramente, toda a estrutura de grids listada abaixo deve ser instanciada a partir de um elemento pai, instanciado com a classe CSS container.

Para um simples layout de duas colunas, crie um .row e adicione um número apropriado de .col-*. Como o grid é de 12 colunas, cada .col-* tem um número que somam 12 colunas, e deve sempre ter 12 colunas para cada linha (ou o número de colunas do pai).

<div class="container">
    <div class="row">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
    </div>
</div>

Não quer suas colunas empilhando em dispositivos menores? Utilize as classes de grid acrescentando col-xs-*, col-sm-*, col-md-* e col-lg-* para controlar o tamanho das suas colunas em variados dispositivos. Veja o exemplo abaixo para uma idéia melhor de como tudo funciona.

.col-xs-12 col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Dica! Reduza a tela e veja como os tamanhos das colunas irá se comportar de maneiras diferentes de acordo com o tamanho do dispositivo, baseado nas declarações das classes CSS col-*.

<div class="row">
    <div class="col-xs-12 col-md-8">.col-xs-12 col-md-8</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
    <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
    <div class="col-xs-6">.col-xs-6</div>
    <div class="col-xs-6">.col-xs-6</div>
</div>

Mova colunas para a direita usando os complementos de classe .col-*-offset-*. O sistema aumenta a margem esquerda de uma coluna por toda colunagem. Por exemplo, em .col-md-4 .col-md-offset-4 teremos uma coluna de 4 espaços, sendo movida à esquerda em um espaçamento à esquerda de 4 colunas. Como foi inserido o complemento -md- na classe, esse espaçamento só será respeitado a partir de dispositivos com tamanho de tela maior que 992px (veja tabela).

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
<div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
    <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
    <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
    <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

Para aninhar seu conteúdo com o grid padrão, adicione um novo .row e dentro dele crie um conjunto de colunas .col-md-* em colunas já existentes. Linhas aninhadas devem compor juntas uma soma de 12 itens.

Level 1: .col-md-9
Level 2: .col-md-6
Level 2: .col-md-6
<div class="row">
    <div class="col-md-9">
        Level 1: .col-md-9
            <div class="row">
                <div class="col-md-6">
                    Level 2: .col-md-6
                </div>
                <div class="col-md-6">
                    Level 2: .col-md-6
                </div>
            </div>
        </div>
    </div>

Altere facilmente a ordem das colunas com as classes modificadoras .col-md-push-* e .col-md-pull-*. Veja no exemplo a seguir que, apesar de as colunas terem sido escritas no HTML em uma ordem, no modo visível a exibição ficou invertida devido ao uso das classes modificadoras.

.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
<div class="row show-grid">
    <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
    <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>