HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Exemplos de grade do Bootstrap 4

❮ Anterior Próximo ❯

Abaixo, coletamos alguns exemplos de layouts de grade do Bootstrap 4.

Três Colunas Iguais

Use a .colclasse em um número especificado de elementos e o Bootstrap reconhecerá quantos elementos existem (e criará colunas de largura igual). No exemplo abaixo, usamos três elementos col, que obtêm uma largura de 33,33% cada.

colo
colo
colo

Exemplo

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Três Colunas Iguais Usando Números

Você também pode usar números para controlar a largura da coluna. Apenas certifique-se de que a soma soma 12 ou menos (não é necessário que você use todas as 12 colunas disponíveis):

col-4
col-4
col-4

Exemplo

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

Três colunas desiguais

Para criar colunas desiguais, você deve usar números. O exemplo a seguir criará uma divisão de 25%/50%/25%:

col-3
col-6
col-3

Exemplo

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

Configurando a largura de uma coluna

No entanto, basta definir apenas a largura de uma coluna e fazer com que as colunas irmãs sejam redimensionadas automaticamente em torno dela. O exemplo a seguir criará uma divisão de 25%/50%/25%:

colo
col-6
colo

Exemplo

<div class="row">
  <div class="col">col</div>
  <div class="col-6">col-6</div>
  <div class="col">col</div>
</div>

Mais Colunas Iguais

1 de 2
2 de 2
1 de 4
2 de 4
3 de 4
4 de 4
1 de 6
2 de 6
3 de 6
4 de 6
5 de 6
6 de 6

Exemplo

<!-- Two equal columns -->
<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<!-- Four equal columns -->
<div class="row">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

<!-- Six equal columns -->
<div class="row">
  <div class="col">1 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3 of 6</div>
  <div class="col">4 of 6</div>  
  <div class="col">5 of 6</div>
  <div class="col">6 of 6</div>
</div>

Colunas de linha

Você também pode controlar quantas colunas devem aparecer uma ao lado da outra (independente de quantas colunas), com as .row-cols-*classes:

1 de 2
2 de 2
1 de 4
2 de 4
3 de 4
4 de 4
1 de 6
2 de 6
3 de 6
4 de 6
5 de 6
6 de 6

Exemplo

<div class="row row-cols-1">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<div class="row row-cols-2">
  <div class="col">1 of 4</div>
  <div class="col">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

<div class="row row-cols-3">
  <div class="col">1 of 6</div>
  <div class="col">2 of 6</div>
  <div class="col">3 of 6</div>
  <div class="col">4 of 6</div>  
  <div class="col">5 of 6</div>
  <div class="col">6 of 6</div>
</div>

Mais Colunas Desiguais

1 de 2
2 de 2
1 de 4
2 de 4
3 de 4
4 de 4
1 de 4
2 de 4
3 de 4
4 de 4

Exemplo

<!-- Two Unequal Columns -->
<div class="row">
  <div class="col-8">1 of 2</div>
  <div class="col-4">2 of 2</div>
</div>

<!-- Four Unequal Columns -->
<div class="row">
  <div class="col-2">1 of 4</div>
  <div class="col-2">2 of 4</div>
  <div class="col-2">3 of 4</div>
  <div class="col-6">4 of 4</div>
</div>

<!-- Setting two column widths -->
<div class="row">
  <div class="col-4">1 of 4</div>
  <div class="col-6">2 of 4</div>
  <div class="col">3 of 4</div>
  <div class="col">4 of 4</div>
</div>

Altura igual

Se uma das colunas for mais alta que a outra (devido à altura do texto ou CSS), o resto seguirá:

Muita dor é muito importante, não há diferença na alimentação e nos sentidos. E a dor que eu posso ter naquele fim de semana. Nenhum mau iriure pega, e zril flats ou algo assim, subsidiou um de nós que viu futebol. Não, nossa dor deve ser lida por mim, deve torná-lo muco Platon.
colo
colo

Exemplo

<div class="row">
  <div class="col">Lorem ipsum...</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Colunas aninhadas

col-8
col-6
col-6
col-4

O exemplo a seguir mostra como criar um layout de duas colunas, com outras duas colunas dentro de uma das colunas:

Exemplo

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

Aulas responsivas

O sistema de grade do Bootstrap 4 tem cinco classes:

  • .col-(dispositivos extra pequenos - largura da tela menor que 576px)
  • .col-sm-(pequenos dispositivos - largura da tela igual ou superior a 576px)
  • .col-md-(dispositivos médios - largura da tela igual ou superior a 768px)
  • .col-lg-(dispositivos grandes - largura da tela igual ou superior a 992px)
  • .col-xl-(dispositivos extragrandes - largura da tela igual ou superior a 1200px)

As classes acima 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 sme md, você só precisa especificar sm.

Empilhado na horizontal

col-sm-9
col-sm-3
col-sm
col-sm
col-sm

O exemplo a seguir mostra como criar um layout de coluna que começa empilhado em dispositivos extra pequenos, antes de se tornar horizontal em dispositivos maiores (sm, md, lg e xl):

Exemplo

<div class="row">
  <div class="col-sm-9">col-sm-9</div>
  <div class="col-sm-3">col-sm-3</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

col-6 col-sm-9
col-6 col-sm-3
col-7 col-lg-8
col-5 col-lg-4
col-sm-3 col-md-6 col-lg-4
col-sm-9 col-md-6 col-lg-8

Exemplo

<!-- 50%/50% split on extra small devices and 75%/25% split on larger devices -->
<div class="row">
  <div class="col-6 col-sm-9">col-6 col-sm-9</div>
  <div class="col-6 col-sm-3">col-6 col-sm-3</div>
</div>

<!-- 58%/42% split on extra small, small and medium devices and 66.3%/33.3% split on large and xlarge devices -->
<div class="row">
  <div class="col-7 col-lg-8">col-7 col-lg-8</div>
  <div class="col-5 col-lg-4">col-5 col-lg-4</div>
</div>

<!-- 25%/75% split on small devices, a 50%/50% split on medium devices, and a 33%/66% split on large and xlarge devices. On extra small devices, it will automatically stack (100%) -->
<div class="row">
  <div class="col-sm-3 col-md-6 col-lg-4">col-sm-3 col-md-6 col-lg-4</div>
  <div class="col-sm-9 col-md-6 col-lg-8">col-sm-9 col-md-6 col-lg-8</div>
</div>

Sem calhas

Adicione a .no-guttersclasse ao .rowcontêiner para remover as calhas (espaço extra):

A dor em si é importante, mas a dor é aumentada pelo processo de adipiscação, mas dou tempo para reduzi-la para que eu faça um ótimo trabalho e dor.
Com o objetivo de chegar ao mínimo, quem de nós deve exercer qualquer emprego, exceto para tirar proveito das consequências dele.
Mas para que compreendais de onde vem todo erro nascido o prazer de acusar e elogiar a dor, abrirei todo o assunto e explicarei as mesmas coisas que foram ditas por aquele inventor da verdade e por assim dizer o arquiteto da a vida abençoada.

Exemplo

<div class="row no-gutters">

❮ Anterior Próximo ❯