Sistema de Grid do Bootstrap

Como Funciona o Grid

O grid é composto por três elementos principais:

Container — Define os limites do conteúdo.
Row (.row) — Cria uma linha onde as colunas serão organizadas.
Columns (.col) — Define quantas partes da linha o conteúdo vai ocupar.

A soma das colunas dentro de uma mesma linha sempre deve totalizar no máximo 12 unidades, mas você pode usar menos — o Bootstrap ajusta automaticamente.

Colunas de Largura Automática

Se você usar apenas .col sem definir um tamanho, o Bootstrap divide o espaço igualmente entre as colunas.

Exemplo:

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

Resultado: Cada coluna ocupa 33% da linha.

Definindo Larguras Específicas

Use .col- seguido de um número de 1 a 12 para definir quanto espaço cada coluna ocupa.

Exemplo:

<div class="container">
  <div class="row">
    <div class="col-8">Coluna com 8/12 da linha</div>
    <div class="col-4">Coluna com 4/12 da linha</div>
  </div>
</div>

Resultado: Uma coluna ocupa aproximadamente 66% e a outra 33%.

Grid Responsivo com Breakpoints

O grid permite adaptar seu layout conforme o tamanho da tela, utilizando os breakpoints:

Classe	A partir de largura
`.col-`	Extra pequeno (0px)
`.col-sm-`	≥ 576px
`.col-md-`	≥ 768px
`.col-lg-`	≥ 992px
`.col-xl-`	≥ 1200px
`.col-xxl-`	≥ 1400px

Exemplo prático de responsividade:

<div class="container">
  <div class="row">
    <div class="col-12 col-md-8">Coluna principal</div>
    <div class="col-12 col-md-4">Sidebar</div>
  </div>
</div>

Comportamento:

No mobile, cada coluna ocupa 100% (empilhadas).
A partir de 768px (md), a primeira ocupa 8/12 (66%) e a segunda 4/12 (33%).

Quebra de Linha

Se a soma das colunas ultrapassar 12, o Bootstrap automaticamente cria uma nova linha.

<div class="container">
  <div class="row">
    <div class="col-8">Grande</div>
    <div class="col-6">Excede 12 → vai pra linha de baixo</div>
  </div>
</div>

Exemplo Visual Comum de Grid

12 colunas de .col-md-1 → cada uma ocupa 1/12 da linha.
Combinações como:
- .col-md-8 + .col-md-4
- .col-md-4 + .col-md-4 + .col-md-4
- .col-md-6 + .col-md-6

Isso permite criar qualquer layout de forma visualmente organizada e responsiva.

Dicas Importantes

Sempre envolva as colunas dentro de uma .row.
Não coloque colunas diretamente dentro do .container, sempre use uma linha (.row) para garantir o alinhamento correto.
Combine diferentes breakpoints para adaptar seu layout a qualquer dispositivo.

Dominar o sistema de grid permite que você tenha controle total sobre qualquer layout, sem precisar escrever CSS manualmente para estrutura.

O próximo passo é entender como tornar esses layouts verdadeiramente responsivos na prática.