Colunas

Aprenda a modificar colunas com várias opções de alinhamento, ordenação e deslocamento graças ao nosso sistema de grade flexbox. Além disso, veja como usar classes de coluna para gerenciar larguras de elementos que não são de grade.

Nesta página

Atenção! Certifique-se de ler a página Grade antes de mergulhar em como modificar e personalizar suas colunas de grade.

Como eles trabalham

As colunas são construídas na arquitetura flexbox da grade. Flexbox significa que temos opções para alterar colunas individuais e modificar grupos de colunas no nível da linha . Você escolhe como as colunas crescem, diminuem ou mudam de outra forma.
Ao construir layouts de grade, todo o conteúdo vai em colunas. A hierarquia da grade do Bootstrap vai de contêiner para linha para coluna para o seu conteúdo. Em raras ocasiões, você pode combinar conteúdo e coluna, mas esteja ciente de que pode haver consequências não intencionais.
O Bootstrap inclui classes predefinidas para criar layouts rápidos e responsivos. Com seis pontos de interrupção e uma dúzia de colunas em cada camada de grade, temos dezenas de classes já construídas para você criar os layouts desejados. Isso pode ser desativado via Sass, se desejar.

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 class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </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="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.

.col-6 .col-sm-3

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

.col-6 .col-sm-4

<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 seis camadas de grade 1.5

Primeiro no DOM, nenhum pedido aplicado

Segundo no DOM, com um pedido maior

Terceiro no DOM, com ordem de 1

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      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: 6.order-*

Primeiro no DOM, pedido por último

Segundo no DOM, não ordenado

Terceiro no DOM, pedido primeiro

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

.col-md-4

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

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

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

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

.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="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 .me-autode margem como forçar colunas irmãs para longe umas das outras.

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Classes de coluna autônomas

As .col-*classes também podem ser usadas fora de a .rowpara dar a um elemento uma largura específica. Sempre que as classes de coluna são usadas como filhos não diretos de uma linha, os preenchimentos são omitidos.

.col-3: largura de 25%

.col-sm-9: largura de 75% acima do ponto de interrupção sm

<div class="col-3 bg-light p-3 border">
  .col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</div>

As classes podem ser usadas em conjunto com utilitários para criar imagens flutuantes responsivas. Certifique-se de envolver o conteúdo em um .clearfixwrapper para limpar o float se o texto for mais curto.

Um parágrafo de texto de espaço reservado. Estamos usando aqui para mostrar o uso da classe clearfix. Estamos adicionando algumas frases sem sentido aqui para demonstrar como as colunas interagem aqui com a imagem flutuante.

Como você pode ver, os parágrafos envolvem graciosamente a imagem flutuante. Agora imagine como isso ficaria com algum conteúdo real aqui, em vez de apenas esse texto de espaço reservado chato que continua e continua, mas na verdade não transmite nenhuma informação tangível. Simplesmente ocupa espaço e não deve ser lido.

E, no entanto, aqui está você, ainda perseverando na leitura deste texto de espaço reservado, esperando por mais alguns insights, ou algum easter egg escondido de conteúdo. Uma piada, talvez. Infelizmente, não há nada disso aqui.

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>