Grid básico padrão com 12 colunas

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.

Media Queries

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) { ... }

Opções do Grid

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

Exemplos

Grids partindo de empilhados para horizontais

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-8

.col-md-4

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

Colunas com tamanhos distintos em mobile tablets ou desktop

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

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>

Espaçamentos horizontais Offsets

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

Aninhando colunas

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

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

Ordenação de colunas

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>