W3Schools

Bootstrap 5 Grades

Bootstrap 5 Grid System

O sistema de grade do Bootstrap é construído com flexbox e permite até 12 colunas na página.

Se você não quiser usar todas as 12 colunas individualmente, poderá agrupar as colunas para criar colunas mais amplas:

col

.col-md-8

.col-6 .col-md-4

.col-6

.col-12

O sistema de grade é responsivo e as colunas serão reorganizadas automaticamente dependendo do tamanho da tela.

Certifique-se de que a soma seja 12 ou menos (não é necessário que você use todas as 12 colunas disponíveis).

Classes de grade

O sistema de grade do Bootstrap 5 tem seis 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)
.col-xxl-(xxdispositivos grandes - largura da tela igual ou superior a 1400px)

As classes acima podem ser combinadas para criar layouts mais dinâmicos e flexíveis.

Dica: cada classe é dimensionada, portanto, se você quiser definir as mesmas larguras para sm e md, precisará apenas especificar sm.

Estrutura Básica de uma Grade Bootstrap 5

A seguir está uma estrutura básica de uma grade do Bootstrap 5:

Exemplo


				<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
 <div class="col-*-*"></div>
 <div class="col-*-*"></div>
</div>
<div class="row">
 <div class="col-*-*"></div>
 <div class="col-*-*"></div>
 <div class="col-*-*"></div>
</div>

<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
 <div class="col"></div>
 <div class="col"></div>
 <div class="col"></div>
</div>

Primeiro exemplo: crie uma linha (<div class="row">). Em seguida, adicione o número desejado de colunas (tags com .col-*-*classes apropriadas). A primeira estrela (*) representa a capacidade de resposta: sm, md, lg, xl ou xxl, enquanto a segunda estrela representa um número, que deve somar 12 para cada linha.

Segundo exemplo: em vez de adicionar um número a cada col, deixe o bootstrap manipular o layout, para criar colunas de largura igual: dois "col"elementos = 50% de largura para cada coluna, enquanto três colunas = 33,33% de largura para cada coluna. Quatro colunas = 25% de largura, etc. Você também pode usar .col-sm|md|lg|xl|xxl para tornar as colunas responsivas.

Abaixo, coletamos alguns exemplos de layouts básicos de grade do Bootstrap 5.

Três Colunas Iguais

.col

O exemplo a seguir mostra como criar três colunas de largura igual, em todos os dispositivos e larguras de tela:

Exemplo


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

Colunas responsivas

.col

O exemplo a seguir mostra como criar quatro colunas de largura igual começando em tablets e dimensionando para áreas de trabalho extra grandes. Em telefones celulares ou telas com menos de 576 pixels de largura, as colunas serão empilhadas automaticamente umas sobre as outras:

Exemplo


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

Duas colunas responsivas desiguais

.col

O exemplo a seguir mostra como obter duas colunas de várias larguras começando em tablets e dimensionando para grandes áreas de trabalho extras:

Exemplo


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