English 中文 العربية 日本語 Português

Bootstrap: Sistema de Grade

Última atualização: 2026-08-26

1. Introdução

(1) Pré-requisitos

(2) 🎯 O que você aprenderá

(3) Ponto de Dor

Alice usou Flexbox para criar uma navbar na lição passada. Agora ela quer criar o layout do corpo principal para sua homepage—uma barra lateral esquerda (3 colunas) + área de conteúdo direita (9 colunas). Implementar estruturas complexas de múltiplas colunas responsivas com CSS tradicional é muito tedioso.

(4) Solução

Usando o sistema de grade do Bootstrap, você só precisa de <div class="row"><div class="col-3">Barra Lateral</div><div class="col-9">Conteúdo</div></div>. A grade é a ferramenta de layout central do Bootstrap, baseada em uma grade Flexbox de 12 colunas. Usar row + col-* permite construir layouts de página de qualquer complexidade.

Como pensar nisso: A grade é como uma planilha Excel—uma linha é um row, dividida uniformemente em 12 partes iguais. col-4 ocupa 4 partes, col-8 ocupa 8 partes, somando exatamente 12.

(5) Benefício

Depois de usar o sistema de grade, Alice completou o layout clássico de blog com estrutura de 3 colunas à esquerda e 9 à direita usando apenas algumas linhas de tags. Combinado com sufixos de breakpoint, ela alcançou facilmente adaptação responsiva.

2. Estrutura Básica

A grade sempre segue uma estrutura de aninhamento Container -> Row -> Column:

HTML 
<div class="container">
  <div class="row">
    <div class="col">Coluna</div>
    <div class="col">Coluna</div>
    <div class="col">Coluna</div>
  </div>
</div>
▶ Experimente

Output: A component with Bootstrap 5.3 styles applied (e.g., buttons, cards, carousel, collapse, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

▶ Exemplo: Layout de Grade Básica

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fundamentos da Grade</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .demo-col { background: #0d6efd; color: #fff; padding: 1rem; border: 1px solid #fff; text-align: center; }
  </style>
</head>
<body>
  <div class="container py-4">
    <div class="row mb-3">
      <div class="col demo-col">col (4/12)</div>
      <div class="col demo-col">col (4/12)</div>
      <div class="col demo-col">col (4/12)</div>
    </div>
    <div class="row mb-3">
      <div class="col-4 demo-col" style="background: #198754;">col-4</div>
      <div class="col-8 demo-col" style="background: #dc3545;">col-8</div>
    </div>
    <div class="row">
      <div class="col-3 demo-col" style="background: #6f42c1;">col-3</div>
      <div class="col demo-col" style="background: #fd7e14;">col (auto)</div>
      <div class="col-3 demo-col" style="background: #20c997;">col-3</div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Output: A component with Bootstrap 5.3 styles applied (e.g., buttons, cards, carousel, collapse, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

(1) Comparação de Comportamento de Coluna

Classe Comportamento Caso de Uso
col Divide uniformemente o espaço restante Colunas de largura igual
col-{n} Largura fixa de n/12 Layout de proporção fixa
col-auto Largura se adapta ao conteúdo Grupos de botões, emblemas
col-{breakpoint} Largura total abaixo do breakpoint, proporcional acima Layout responsivo

3. Colunas Responsivas

HTML 
<div class="row">
  <div class="col-12 col-md-6 col-lg-4 bg-primary p-3 text-white">Barra Lateral</div>
  <div class="col-12 col-md-6 col-lg-8 bg-info p-3 text-white">Conteúdo</div>
</div>
▶ Experimente

Output: A component with Bootstrap 5.3 styles applied (e.g., buttons, cards, carousel, collapse, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

Sintaxe < 768px 768-991px >= 992px
col-12 col-md-6 col-lg-4 Largura total 1/2 largura 1/3 largura
col-6 col-md-4 col-xl-3 1/2 largura 1/3 largura 1/4 largura
col-md-8 Largura total 2/3 largura 2/3 largura

4. Múltiplas Linhas e Quebra

Quando o número total de colunas em uma linha excede 12, as colunas extras quebram automaticamente para a próxima linha:

HTML 
<div class="row">
  <div class="col-4 bg-primary p-3 text-white">4</div>
  <div class="col-4 bg-success p-3 text-white">4</div>
  <div class="col-4 bg-danger p-3 text-white">4</div>
  <div class="col-4 bg-warning p-3">4 (quebra para próxima linha)</div>
  <div class="col-4 bg-info p-3 text-white">4</div>
</div>
▶ Experimente

Output: A component with Bootstrap 5.3 styles applied (e.g., buttons, cards, carousel, collapse, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

5. Offset

HTML 
<div class="row">
  <div class="col-3 bg-primary p-3 text-white">Barra Lateral</div>
  <div class="col-6 offset-3 bg-info p-3 text-white">Deslocado 3 colunas à direita</div>
</div>

<div class="row">
  <div class="col-6 offset-3 bg-success p-3 text-white text-center">
    Coluna centralizada (col-6 + offset-3)
  </div>
</div>
▶ Experimente

Output: A component with Bootstrap 5.3 styles applied (e.g., buttons, cards, carousel, collapse, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

Sintaxe Efeito
col-6 offset-3 6 colunas centralizadas
col-4 offset-4 4 colunas centralizadas
col-8 offset-2 8 colunas deslocadas à esquerda

6. Aninhamento

Aninhe outro conjunto de row + col dentro de uma coluna:

HTML 
<div class="row">
  <div class="col-8 bg-light p-3">
    <h6>Seção Principal</h6>
    <div class="row">
      <div class="col-6 bg-primary text-white p-2">Aninhado 6</div>
      <div class="col-6 bg-success text-white p-2">Aninhado 6</div>
    </div>
  </div>
  <div class="col-4 bg-info p-3 text-white">Barra Lateral</div>
</div>
▶ Experimente

Output: A component with Bootstrap 5.3 styles applied (e.g., buttons, cards, carousel, collapse, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default. A soma total de colunas em uma grade aninhada também é 12, mas é calculada em relação à coluna pai (não ao contêiner).

7. Gutters

HTML 
<div class="row g-0">
  <div class="col-6"><div class="bg-primary text-white p-3">g-0: sem gap</div></div>
  <div class="col-6"><div class="bg-success text-white p-3">g-0: sem gap</div></div>
</div>

<div class="row g-4 mt-2">
  <div class="col-6"><div class="bg-primary text-white p-3">g-4: 24px gap</div></div>
  <div class="col-6"><div class="bg-success text-white p-3">g-4: 24px gap</div></div>
</div>
▶ Experimente

Output: A component with Bootstrap 5.3 styles applied (e.g., buttons, cards, carousel, collapse, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

Classe Horizontal Vertical
g-0 0 0
g-3 1rem 1rem
g-5 3rem 3rem
gx-4 1.5rem 0
gy-4 0 1.5rem

8. Arquitetura e Referência da Grade

(1) Arquitetura do Sistema de Grade

100% 
graph TB
    subgraph Camada do Contêiner
        A[.container / .container-fluid] --> B[Largura Máx + Padding Horizontal]
    end
    subgraph Camada da Row
        B --> C[.row]
        C --> D[Margin negativa para compensar padding do contêiner]
        C --> E[Controle de espaçamento do gutter]
    end
    subgraph Camada da Coluna
        D --> F[.col-*]
        E --> F
        F --> G[Sistema flex de 12 colunas]
        F --> H[Breakpoints responsivos col-md-*]
        F --> I[Offset offset-*]
        F --> J[Ordem order-*]
    end
    subgraph Sub-conteúdo
        G --> K[Grade aninhada row > col]
        H --> K
        I --> K
    end

Output: A component with Bootstrap 5.3 styles applied (e.g., buttons, cards, carousel, collapse, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

(2) Referência de Nível da Grade

Nível Elemento Classe Largura Descrição
Contêiner <div> container Largura fixa responsiva Centralizado, limita max-width
Contêiner <div> container-fluid 100% Largura total
Contêiner <div> container-{sm|md|lg|xl|xxl} Breakpoint correspondente Largura total até o breakpoint especificado
Row <div> row 100% + margin negativa Contêiner flex
Coluna <div> col Auto-dividida Auto-dimensiona
Coluna <div> col-{n} n/12 Proporção fixa
Coluna <div> col-{bp}-{n} Responsivo Proporcional acima do breakpoint

(3) Referência de Coluna por Breakpoint da Grade

Nome da Classe <576px >=576px >=768px >=992px >=1200px >=1400px
col-12 100% 100% 100% 100% 100% 100%
col-sm-6 100% 50% 50% 50% 50% 50%
col-md-4 100% 100% 33.3% 33.3% 33.3% 33.3%
col-lg-3 100% 100% 100% 25% 25% 25%
col-xl-2 100% 100% 100% 100% 16.67% 16.67%
col-12 col-md-6 col-lg-4 100% 100% 50% 33.3% 33.3% 33.3%
col-6 col-md-4 col-xl-3 50% 50% 33.3% 33.3% 25% 25%

▶ Exemplo: Layout de Página de Blog

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Layout de Blog</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <header class="mb-4">
      <h1>Meu Blog</h1>
      <p class="text-muted">Compartilhando tecnologia e pensamentos</p>
    </header>

    <div class="row g-4">
      <!-- Conteúdo principal -->
      <article class="col-12 col-lg-8">
        <div class="card mb-3">
          <div class="card-body">
            <h2 class="card-title h4">Grade em Ação</h2>
            <p class="card-text text-muted small">20 de janeiro de 2026</p>
            <p>Usando col-8 + col-4 para criar um layout clássico de blog com área de artigos à esquerda e barra lateral à direita.</p>
            <button class="btn btn-sm btn-primary">Ler Mais</button>
          </div>
        </div>
        <div class="card">
          <div class="card-body">
            <h2 class="card-title h4">Novos Recursos do Bootstrap 5</h2>
            <p class="card-text text-muted small">18 de janeiro de 2026</p>
            <p>O Bootstrap 5 introduz variáveis CSS, sistema de grade aprimorado e novas classes utilitárias.</p>
            <button class="btn btn-sm btn-primary">Ler Mais</button>
          </div>
        </div>
      </article>

      <!-- Barra lateral -->
      <aside class="col-12 col-lg-4">
        <div class="bg-light p-4 rounded">
          <h5>Sobre o Autor</h5>
          <p class="small mb-0">Desenvolvedor full-stack apaixonado por tecnologia front-end e design de UI.</p>
        </div>
        <div class="bg-light p-4 rounded mt-3">
          <h5>Categorias</h5>
          <ul class="list-unstyled small mb-0">
            <li>Front-end (12)</li>
            <li>Back-end (8)</li>
            <li>Design (5)</li>
          </ul>
        </div>
      </aside>
    </div>
  </div>
</body>
</html>
▶ Experimente

Output: A component with Bootstrap 5.3 styles applied (e.g., buttons, cards, carousel, collapse, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

▶ Exemplo: Grade de Dashboard

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grade de Dashboard</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container-fluid py-4 bg-light" style="min-height: 100vh;">
    <h3 class="mb-4">Dashboard</h3>

    <!-- Linha de estatísticas -->
    <div class="row g-3 mb-4">
      <div class="col-6 col-xl-3">
        <div class="bg-primary text-white p-3 rounded">
          <h6 class="mb-1">Usuários</h6>
          <h3 class="mb-0">1.284</h3>
        </div>
      </div>
      <div class="col-6 col-xl-3">
        <div class="bg-success text-white p-3 rounded">
          <h6 class="mb-1">Pedidos</h6>
          <h3 class="mb-0">356</h3>
        </div>
      </div>
      <div class="col-6 col-xl-3">
        <div class="bg-warning text-dark p-3 rounded">
          <h6 class="mb-1">Receita</h6>
          <h3 class="mb-0">$12.450</h3>
        </div>
      </div>
      <div class="col-6 col-xl-3">
        <div class="bg-info text-white p-3 rounded">
          <h6 class="mb-1">Atividade</h6>
          <h3 class="mb-0">78%</h3>
        </div>
      </div>
    </div>

    <!-- Gráficos + Tabela -->
    <div class="row g-3">
      <div class="col-12 col-lg-8">
        <div class="bg-white p-4 rounded shadow-sm">
          <h5>Área do Gráfico</h5>
          <div class="bg-light" style="height: 200px;"></div>
        </div>
      </div>
      <div class="col-12 col-lg-4">
        <div class="bg-white p-4 rounded shadow-sm">
          <h5>Atividade Recente</h5>
          <ul class="list-unstyled small mb-0">
            <li class="mb-2">João registrou uma nova conta</li>
            <li class="mb-2">Maria enviou um pedido</li>
            <li>Pedro atualizou seu perfil</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Output: A component with Bootstrap 5.3 styles applied (e.g., buttons, cards, carousel, collapse, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

▶ Exemplo: Grade Aninhada

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grade Aninhada</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .outer { background: #e9ecef; border: 2px dashed #0d6efd; padding: 1rem; }
    .inner { background: #0d6efd; color: #fff; padding: 0.75rem; border: 1px solid #fff; text-align: center; }
  </style>
</head>
<body>
  <div class="container py-4">
    <h3 class="mb-3">Demonstração de Grade Aninhada</h3>

    <div class="row">
      <div class="col-8">
        <div class="outer">
          <h6>Coluna Principal col-8</h6>
          <div class="row g-2">
            <div class="col-6"><div class="inner">Aninhado col-6</div></div>
            <div class="col-6"><div class="inner">Aninhado col-6</div></div>
            <div class="col-4"><div class="inner">Aninhado col-4</div></div>
            <div class="col-4"><div class="inner">Aninhado col-4</div></div>
            <div class="col-4"><div class="inner">Aninhado col-4</div></div>
          </div>
          <p class="small mt-2 mb-0">As 12 colunas em uma grade aninhada são calculadas em relação à coluna pai</p>
        </div>
      </div>
      <div class="col-4">
        <div class="outer" style="height: 100%;">
          <h6>Barra Lateral col-4</h6>
          <p class="small mb-0">A altura da barra lateral alinha automaticamente com o conteúdo da coluna principal</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
▶ Experimente

Output: A component with Bootstrap 5.3 styles applied (e.g., buttons, cards, carousel, collapse, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

▶ Exemplo: Grade de Produtos Responsiva

HTML 
<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grade de Produtos</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container py-4">
    <h3 class="mb-4">Lista de Produtos</h3>

    <div class="row g-3 g-lg-4">
      <div class="col-6 col-md-4 col-lg-3">
        <div class="card">
          <img src="https://via.placeholder.com/300x200/0d6efd/fff?text=Product1" class="card-img-top" alt="">
          <div class="card-body">
            <h6 class="card-title">Nome do Produto</h6>
            <p class="card-text text-danger fw-bold mb-0">$99,00</p>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <div class="card">
          <img src="https://via.placeholder.com/300x200/198754/fff?text=Product2" class="card-img-top" alt="">
          <div class="card-body">
            <h6 class="card-title">Nome do Produto</h6>
            <p class="card-text text-danger fw-bold mb-0">$149,00</p>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <div class="card">
          <img src="https://via.placeholder.com/300x200/dc3545/fff?text=Product3" class="card-img-top" alt="">
          <div class="card-body">
            <h6 class="card-title">Nome do Produto</h6>
            <p class="card-text text-danger fw-bold mb-0">$199,00</p>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <div class="card">
          <img src="https://via.placeholder.com/300x200/ffc107/000?text=Product4" class="card-img-top" alt="">
          <div class="card-body">
            <h6 class="card-title">Nome do Produto</h6>
            <p class="card-text text-danger fw-bold mb-0">$59,00</p>
          </div>
        </div>
      </div>
    </div>

    <p class="text-muted small mt-3">
      Responsivo: Mobile 2 colunas (col-6) → Tablet 3 colunas (col-md-4) → Desktop 4 colunas (col-lg-3), espaçamento g-3 → g-lg-4
    </p>
  </div>
</body>
</html>
▶ Experimente

Output: A component with Bootstrap 5.3 styles applied (e.g., buttons, cards, carousel, collapse, etc.). The page uses Bootstrap's default theme (light) and responsive grid by default.

❓ Perguntas Frequentes

P: O que acontece se o número total de colunas em uma linha for menor que 12? R: O espaço à direita permanece vazio. Por exemplo, col-4 + col-4 ocupa 8/12, deixando 4/12 vazios. Se precisar preencher o espaço restante, use col (auto-dimensiona).

P: Qual a diferença entre o gutter da grade e a classe utilitária de espaçamento gap-*? R: g-* (gutter) é específico da grade e controla o espaço entre colunas aplicando ao row. gap-* é uma classe utilitária geral de flex/grid. Em layouts de grade, g-* é recomendado.

P: Por que minhas colunas de grade não ficam na mesma linha? R: As razões mais comuns: (1) As colunas não estão dentro de um row; (2) o row não está dentro de um contêiner (container/container-fluid); (3) A largura total da coluna excede 12, causando quebra.

P: col é o mesmo que col-12? R: Visualmente são iguais (ambos 100% de largura), mas o comportamento difere. col usa flex: 1 0 0% e dividirá uniformemente o espaço disponível entre outros elementos col. col-12 tem width: 100% fixo.

P: Como faço alinhamento vertical na grade? R: Colunas de grade também são filhos Flexbox, então você pode usar diretamente as classes utilitárias align-items-* e align-self-*. Adicionar align-items-center a um row centraliza verticalmente todas as colunas na linha. Adicionar align-self-end a um col específico o alinha à base.

📖 Resumo

📝 Exercícios

  1. ⭐ Crie um layout padrão de blog: exiba largura total no mobile, área de artigo col-8 à esquerda + barra lateral col-4 à direita no desktop.
  2. ⭐⭐ Use a grade para implementar uma grade de cards de quatro colunas: 1 coluna no mobile (col-12), 2 colunas no tablet (col-md-6), 4 colunas no desktop (col-lg-3), com espaçamento g-4 entre os cards.
  3. ⭐⭐⭐ Crie um layout assimétrico: barra lateral col-3 + área de conteúdo col-6 + pequeno widget à direita col-3.

Lição Anterior: Design Responsivo · Próxima Lição: Navbar

Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%