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.

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

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.

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

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 .w-100com alguns utilitários de exibição responsivos .

Houve um bug do Safari flexbox que impediu que isso funcionasse sem um arquivo explícito flex-basisou border. Existem soluções alternativas para versões de navegadores mais antigas, mas elas não devem ser necessárias se seus navegadores de destino não se enquadrarem nas versões com bugs.

<div class="container">
  <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>
</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.

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

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

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.

<div class="container">
  <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>
</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).

<div class="container">
  <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>
</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.

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.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>
</div>

Calhas

As calhas podem ser ajustadas de forma responsiva por preenchimento específico de ponto de interrupção e classes de utilidade de margem negativa. Para alterar as medianizes em uma determinada linha, emparelhe um utilitário de margem negativa no .rowe utilitários de preenchimento correspondentes no .cols. O pai .containerou .container-fluidpode precisar ser ajustado também para evitar estouro indesejado, usando novamente o utilitário de preenchimento correspondente.

Aqui está um exemplo de personalização da grade do Bootstrap no lgponto de interrupção grande ( ) e acima. Aumentamos o .colpreenchimento com .px-lg-5, neutralizamos isso com .mx-lg-n5o pai .rowe ajustamos o .containerwrapper com .px-lg-5.

<div class="container px-lg-5">
  <div class="row mx-lg-n5">
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
    <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  </div>
</div>

Colunas de linha

Use as .row-cols-*classes responsivas para definir rapidamente o número de colunas que melhor renderizam seu conteúdo e layout. Enquanto as .col-*classes normais se aplicam às colunas individuais (por exemplo, .col-md-4), as classes das colunas de linha são definidas no pai .rowcomo um atalho.

Use essas classes de colunas de linha para criar rapidamente layouts de grade básicos ou para controlar seus layouts de cartão.

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Você também pode usar o mixin Sass que o acompanha, row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Alinhamento

Use utilitários de alinhamento flexbox para alinhar colunas vertical e horizontalmente. O Internet Explorer 10-11 não oferece suporte ao alinhamento vertical de itens flexíveis quando o contêiner flexível possui um min-heightconforme mostrado abaixo. Veja Flexbugs #3 para mais detalhes.

Alinhamento vertical

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

<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

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

<div class="row no-gutters">
  <div class="col-sm-6 col-md-8">.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.

<div class="container">
  <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>
</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.

<div class="container">
  <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>
</div>

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

<div class="container">
  <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>
</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

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-12">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </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-*

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered 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.

<div class="container">
  <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>
</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 .

<div class="container">
  <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>
</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.

<div class="container">
  <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>
</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).

<div class="container">
  <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>
</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 {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

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

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