Source

Sistema de rede

Use nossa grade flexbox poderosa para dispositivos móveis para criar layouts de todas as formas e tamanhos graças a um sistema de doze colunas, cinco camadas responsivas padrão, variáveis e mixins Sass e dezenas de classes predefinidas.

Como funciona

O sistema de grade do Bootstrap usa uma série de contêineres, linhas e colunas para layout e alinhamento de conteúdo. É construído com flexbox e é totalmente responsivo. Abaixo está um exemplo e uma visão detalhada de como a grade se junta.

Novo ou não familiarizado com flexbox? Leia este guia flexbox CSS Tricks para obter informações básicas, terminologia, diretrizes e trechos de código.

Uma das três colunas

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

O exemplo acima cria três colunas de largura igual em dispositivos pequenos, médios, grandes e extragrandes usando nossas classes de grade predefinidas. Essas colunas são centralizadas na página com o pai .container.

Decompondo, veja como funciona:

Os contêineres fornecem um meio de centralizar e preencher horizontalmente o conteúdo do seu site. Use .containerpara uma largura de pixel responsiva ou .container-fluidpara width: 100%todos os tamanhos de janela de visualização e dispositivo.
As linhas são wrappers para colunas. Cada coluna tem horizontal padding(chamada de calha) para controlar o espaço entre elas. Isso paddingé então neutralizado nas linhas com margens negativas. Dessa forma, todo o conteúdo de suas colunas é alinhado visualmente no lado esquerdo.
Em um layout de grade, o conteúdo deve ser colocado dentro de colunas e somente as colunas podem ser filhas imediatas de linhas.
Graças ao flexbox, as colunas da grade sem um widthlayout especificado serão automaticamente dispostas como colunas de largura igual. Por exemplo, quatro instâncias de .col-smterão automaticamente 25% de largura a partir do ponto de interrupção pequeno e acima. Consulte a seção de colunas de layout automático para obter mais exemplos.
As classes de coluna indicam o número de colunas que você gostaria de usar das 12 possíveis por linha. Então, se você quiser três colunas de largura igual, você pode usar .col-4.
As colunas widthsão definidas em porcentagens, portanto, são sempre fluidas e dimensionadas em relação ao elemento pai.
As colunas têm horizontal paddingpara criar as medianizes entre as colunas individuais, no entanto, você pode remover as marginlinhas e as paddingcolunas com .no-guttersa extensão .row.
Para tornar a grade responsiva, há cinco pontos de interrupção da grade, um para cada ponto de interrupção responsivo : todos os pontos de interrupção (extra pequenos), pequenos, médios, grandes e extragrandes.
Os pontos de interrupção de grade são baseados em consultas de mídia de largura mínima, o que significa que eles se aplicam a esse ponto de interrupção e a todos os acima dele (por exemplo, .col-sm-4aplica-se a dispositivos pequenos, médios, grandes e extragrandes, mas não ao primeiro ponto de xsinterrupção).
Você pode usar classes de grade predefinidas (como .col-4) ou mixins Sass para uma marcação mais semântica.

Esteja ciente das limitações e bugs do flexbox , como a incapacidade de usar alguns elementos HTML como contêineres flexíveis .

Opções de grade

Enquanto o Bootstrap usa ems ou rems para definir a maioria dos tamanhos, pxs são usados para pontos de interrupção de grade e larguras de contêiner. Isso ocorre porque a largura da janela de visualização está em pixels e não muda com o tamanho da fonte .

Veja como os aspectos do sistema de grade do Bootstrap funcionam em vários dispositivos com uma tabela prática.

	Extra pequeno <576px	Pequeno ≥576px	Médio ≥768px	Grande ≥992px	Extra grande ≥1200px
Largura máxima do contêiner	Nenhum (automático)	540px	720px	960px	1140px
Prefixo da classe	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# de colunas	12
largura da calha	30px (15px em cada lado de uma coluna)
encaixável	Sim
Ordenação das colunas	Sim

Colunas de layout automático

Utilize classes de coluna específicas de ponto de interrupção para facilitar o dimensionamento de colunas sem uma classe numerada explícita como .col-sm-6.

Largura igual

Por exemplo, aqui estão dois layouts de grade que se aplicam a todos os dispositivos e viewports, xsde xl. Adicione qualquer número de classes sem unidade para cada ponto de interrupção necessário e todas as colunas terão a mesma largura.

1 de 2

2 de 2

1 de 3

2 de 3

3 de 3

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

Colunas de largura igual podem ser divididas em várias linhas, mas havia um bug do Safari flexbox que impedia que isso funcionasse sem um . Existem soluções alternativas para versões mais antigas do navegador, mas elas não devem ser necessárias se você estiver atualizado.flex-basisborder

Coluna

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Definindo a largura de uma coluna

O layout automático para colunas de grade flexbox também significa que você pode definir a largura de uma coluna e fazer com que as colunas irmãs sejam redimensionadas automaticamente em torno dela. Você pode usar classes de grade predefinidas (como mostrado abaixo), mixins de grade ou larguras em linha. Observe que as outras colunas serão redimensionadas independentemente da largura da coluna central.

1 de 3

2 de 3 (mais largo)

3 de 3

1 de 3

2 de 3 (mais largo)

3 de 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Conteúdo de largura variável

Use col-{breakpoint}-autoclasses para dimensionar colunas com base na largura natural de seu conteúdo.

1 de 3

Conteúdo de largura variável

3 de 3

1 de 3

Conteúdo de largura variável

3 de 3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Várias linhas de largura igual

Crie colunas de largura igual que abrangem várias linhas inserindo um .w-100onde você deseja que as colunas se quebrem em uma nova linha. Torne as pausas responsivas misturando o .w-100com alguns utilitários de exibição responsivos .

colo

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Aulas responsivas

A grade do Bootstrap inclui cinco camadas de classes predefinidas para construir layouts responsivos complexos. Personalize o tamanho de suas colunas em dispositivos extra pequenos, pequenos, médios, grandes ou extragrandes como achar melhor.

Todos os pontos de interrupção

Para grades que são iguais do menor ao maior dos dispositivos, use as classes .cole . .col-*Especifique uma classe numerada quando precisar de uma coluna de tamanho específico; caso contrário, fique à vontade para manter o .col.

colo

col-8

col-4

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

Empilhado na horizontal

Usando um único conjunto de .col-sm-*classes, você pode criar um sistema de grade básico que começa empilhado e se torna horizontal no pequeno ponto de interrupção ( sm).

col-sm-8

col-sm-4

col-sm

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

Misturar e combinar

Não quer que suas colunas simplesmente empilhem em algumas camadas de grade? Use uma combinação de classes diferentes para cada camada, conforme necessário. Veja o exemplo abaixo para ter uma ideia melhor de como tudo funciona.

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

Alinhamento

Use utilitários de alinhamento flexbox para alinhar colunas vertical e horizontalmente.

Alinhamento vertical

Uma das três colunas

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

Uma das três colunas

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Alinhamento horizontal

Uma das duas colunas

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Sem calhas

As calhas entre colunas em nossas classes de grade predefinidas podem ser removidas com .no-gutters. Isso remove os margins negativos .rowe a horizontal paddingde todas as colunas filhas imediatas.

Aqui está o código-fonte para criar esses estilos. Observe que as substituições de coluna têm como escopo apenas as primeiras colunas filhas e são direcionadas por meio do seletor de atributo . Embora isso gere um seletor mais específico, o preenchimento de colunas ainda pode ser personalizado com utilitários de espaçamento .

Precisa de um design de ponta a ponta? Solte o pai .containerou .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

Na prática, veja como fica. Observe que você pode continuar a usar isso com todas as outras classes de grade predefinidas (incluindo larguras de coluna, camadas responsivas, reordenações e muito mais).

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

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

Quebra de coluna

Se mais de 12 colunas forem colocadas em uma única linha, cada grupo de colunas extras será, como uma unidade, agrupado em uma nova linha.

.col-9

.col-4
Como 9 + 4 = 13 > 12, esse div de 4 colunas é agrupado em uma nova linha como uma unidade contígua.

.col-6
As colunas subsequentes continuam ao longo da nova linha.

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

Quebras de coluna

Quebrar colunas para uma nova linha no flexbox requer um pequeno truque: adicione um elemento width: 100%onde você deseja envolver suas colunas em uma nova linha. Normalmente, isso é feito com vários .rows, mas nem todos os métodos de implementação podem explicar isso.

.col-6 .col-sm-3

<div class="row">
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

  <!-- Force next columns to break to new line -->
  <div class="w-100"></div>

  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

Você também pode aplicar essa quebra em pontos de interrupção específicos com nossos utilitários de exibição responsivos .

.col-6 .col-sm-4

<div class="row">
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block"></div>

  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>

Reordenando

Encomendar aulas

Use .order-classes para controlar a ordem visual do seu conteúdo. Essas classes são responsivas, então você pode definir o orderponto de interrupção por (por exemplo, .order-1.order-md-2). Inclui suporte para todas as cinco camadas de grade 1.12

Primeiro, mas não ordenado

Segundo, mas último

Terceiro, mas primeiro

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

Existem também classes responsivas .order-firste que alteram o de um elemento aplicando e ( ), respectivamente. Essas classes também podem ser misturadas com as classes numeradas conforme necessário..order-lastorderorder: -1order: 13order: $columns + 1.order-*

Primeiro, mas último

Segundo, mas não ordenado

Terceiro, mas primeiro

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

Colunas de compensação

Você pode deslocar colunas de grade de duas maneiras: nossas .offset-classes de grade responsivas e nossos utilitários de margem . As classes de grade são dimensionadas para corresponder às colunas, enquanto as margens são mais úteis para layouts rápidos em que a largura do deslocamento é variável.

Classes de deslocamento

Mova as colunas para a direita usando .offset-md-*classes. Essas classes aumentam a margem esquerda de uma coluna por *colunas. Por exemplo, .offset-md-4move -se .col-md-4por quatro colunas.

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

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

Além de limpar a coluna em pontos de interrupção responsivos, pode ser necessário redefinir os deslocamentos. Veja isso em ação no exemplo de grade .

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

Utilitários de margem

Com a mudança para o flexbox na v4, você pode usar utilitários .mr-autode margem como forçar colunas irmãs para longe umas das outras.

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

Aninhamento

Para aninhar seu conteúdo com a grade padrão, adicione um novo .rowe um conjunto de .col-sm-*colunas em uma .col-sm-*coluna existente. As linhas aninhadas devem incluir um conjunto de colunas que somam 12 ou menos (não é necessário usar todas as 12 colunas disponíveis).

Nível 1: .col-sm-9

Nível 2: .col-8 .col-sm-6

Nível 2: .col-4 .col-sm-6

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

Mixins atrevidos

Ao usar os arquivos Sass de origem do Bootstrap, você tem a opção de usar variáveis e mixins Sass para criar layouts de página personalizados, semânticos e responsivos. Nossas classes de grade predefinidas usam essas mesmas variáveis e mixins para fornecer um conjunto completo de classes prontas para uso para layouts responsivos rápidos.

Variáveis

Variáveis e mapas determinam o número de colunas, a largura da medianiz e o ponto de consulta de mídia no qual as colunas flutuantes devem ser iniciadas. Nós os usamos para gerar as classes de grade predefinidas documentadas acima, bem como para os mixins personalizados listados abaixo.

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Mixins

Mixins são usados em conjunto com as variáveis de grade para gerar CSS semântico para colunas de grade individuais.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Exemplo de uso

Você pode modificar as variáveis para seus próprios valores personalizados ou apenas usar os mixins com seus valores padrão. Aqui está um exemplo de como usar as configurações padrão para criar um layout de duas colunas com um intervalo entre elas.

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

Conteúdo principal

Conteúdo secundário

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

Personalizando a grade

Usando nossas variáveis e mapas Sass de grade integrados, é possível personalizar completamente as classes de grade predefinidas. Altere o número de camadas, as dimensões da consulta de mídia e as larguras do contêiner — depois recompile.

Colunas e calhas

O número de colunas da grade pode ser modificado por meio de variáveis Sass. $grid-columnsé usado para gerar as larguras (em porcentagem) de cada coluna individual enquanto $grid-gutter-widthdefine a largura das calhas da coluna.

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Camadas de grade

Indo além das próprias colunas, você também pode personalizar o número de camadas de grade. Se você quisesse apenas quatro camadas de grade, atualizaria o $grid-breakpointsand $container-max-widthspara algo assim:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Ao fazer qualquer alteração nas variáveis ou mapas Sass, você precisará salvar suas alterações e recompilar. Isso produzirá um novo conjunto de classes de grade predefinidas para larguras de coluna, deslocamentos e ordenação. Os utilitários de visibilidade responsivos também serão atualizados para usar os pontos de interrupção personalizados. Certifique-se de definir valores de grade em px(não rem, em, ou %).