Exemplos de grade de inicialização
Abaixo, coletamos alguns exemplos de layouts básicos de grade do Bootstrap.
Três Colunas Iguais
O exemplo a seguir mostra como obter três colunas de largura igual começando em tablets e dimensionando para desktops grandes. Em telefones celulares, as colunas serão empilhadas automaticamente:
Exemplo
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Três Colunas Desiguais
O exemplo a seguir mostra como obter três colunas de várias larguras começando em tablets e dimensionando para grandes desktops:
Exemplo
<div class="row">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Duas colunas desiguais
O exemplo a seguir mostra como obter duas colunas de várias larguras começando em tablets e dimensionando para grandes desktops:
Exemplo
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Sem calhas
Use a .row-no-guttersclasse para remover as calhas de uma linha e suas colunas:
Exemplo
<div class="row row-no-gutters">
<div class="col-sm-3">.col-sm-3</div>
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-3">.col-sm-3</div>
</div>
Duas colunas com duas colunas aninhadas
O exemplo a seguir mostra como obter duas colunas começando em tablets e dimensionadas para desktops grandes, com outras duas colunas (larguras iguais) dentro da coluna maior (em telefones celulares, essas colunas e suas colunas aninhadas serão empilhadas):
Exemplo
<div class="row">
<div class="col-sm-8">
.col-sm-8
<div class="row">
<div class="col-sm-6">.col-sm-6</div>
<div class="col-sm-6">.col-sm-6</div>
</div>
</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Misto: Mobile e Desktop
O sistema de grade Bootstrap tem quatro classes: xs (telefones), sm (tablets), md (desktops) e lg (desktops maiores). As classes podem ser combinadas para criar layouts mais dinâmicos e flexíveis.
Dica: Cada classe aumenta, então se você deseja definir as mesmas larguras para xs e sm, você só precisa especificar xs.
Exemplo
<div class="row">
<div class="col-xs-9 col-md-7">.col-xs-9 .col-md-7</div>
<div class="col-xs-3 col-md-5">.col-xs-3 .col-md-5</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-10">.col-xs-6 .col-md-10</div>
<div class="col-xs-6 col-md-2">.col-xs-6 .col-md-2</div>
</div>
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>
Dica: Lembre-se de que as colunas da grade devem somar até doze para uma linha. Mais do que isso, as colunas serão empilhadas independentemente da janela de visualização.
Misto: Celular, Tablet e Desktop
Exemplo
<div class="row">
<div class="col-xs-7 col-sm-6 col-lg-8">.col-xs-7 .col-sm-6 .col-lg-8</div>
<div class="col-xs-5 col-sm-6 col-lg-4">.col-xs-5 .col-sm-6 .col-lg-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-8 col-lg-10">.col-xs-6 .col-sm-8 .col-lg-10</div>
<div class="col-xs-6 col-sm-4 col-lg-2">.col-xs-6 .col-sm-4 .col-lg-2</div>
</div>
Limpar flutuadores
Limpe floats (com a .clearfixclasse) em pontos de interrupção específicos para evitar quebras estranhas com conteúdo desigual:
Exemplo
<div class="row">
<div class="col-xs-6 col-sm-3">
Column 1
<br>
Resize the browser window to see the effect.
</div>
<div class="col-xs-6 col-sm-3">Column 2</div>
<!-- Add clearfix for only the required viewport -->
<div class="clearfix visible-xs"></div>
<div class="col-xs-6 col-sm-3">Column 3</div>
<div class="col-xs-6 col-sm-3">Column 4</div>
</div>
Colunas de compensação
Mova as colunas para a direita usando .col-md-offset-*classes. Essas classes aumentam a margem esquerda de uma coluna em * colunas:
Exemplo
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">
</div>
Empurrar e puxar - Alterar a ordem das colunas
Altere a ordem das colunas da grade com .col-md-push-*e
.col-md-pull-*classes:
Exemplo
<div class="row">
<div class="col-sm-4 col-sm-push-8">.col-sm-4 .col-sm-push-8</div>
<div class="col-sm-8 col-sm-pull-4">.col-sm-8 .col-sm-pull-4</div>
</div>