🧱 Como Usar o Sistema de Grid do Bootstrap 5: Guia Completo com Exemplos

📌 Introdução

O sistema de grid é o fundamento visual do Bootstrap. É com ele que organizamos seções, colunas, imagens e textos em qualquer layout profissional.

Se você está aprendendo Bootstrap agora ou já criou sua primeira navbar, chegou a hora de dominar o Grid 5, o componente que transforma seu layout em algo responsivo e com aparência de site pronto para vender.

🧩 O Que é o Grid do Bootstrap?

O sistema de grid do Bootstrap é baseado em um modelo de 12 colunas. Você pode dividir seu layout da forma que quiser — 6 + 6, 4 + 4 + 4, 3 + 9 — e o Bootstrap faz os ajustes automáticos com base no tamanho da tela do usuário.

✅ Estrutura básica:

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

🧱 Componentes do Grid

🧪 Exemplos Práticos

🔹 1. Duas Colunas Iguais (50%/50%)

<div class="container my-4">
  <div class="row">
    <div class="col-md-6 bg-light p-4">Esquerda</div>
    <div class="col-md-6 bg-dark text-white p-4">Direita</div>
  </div>
</div>

📌 Uso: Sobre nós, seções equilibradas, comparações.

🔹 2. Três Colunas Iguais (33% cada)

<div class="container my-4">
  <div class="row text-center">
    <div class="col-md-4 bg-primary text-white p-3">Item 1</div>
    <div class="col-md-4 bg-secondary text-white p-3">Item 2</div>
    <div class="col-md-4 bg-success text-white p-3">Item 3</div>
  </div>
</div>

📌 Uso: Serviços, planos, vantagens.

🔹 3. Layout com Imagem e Texto

<div class="container my-5">
  <div class="row align-items-center">
    <div class="col-md-6">
      <img src="https://picsum.photos/500/300" class="img-fluid rounded" alt="Imagem bonita">
    </div>
    <div class="col-md-6">
      <h2>Seja Responsivo</h2>
      <p>Com o Grid do Bootstrap, seu site se adapta automaticamente para desktop, tablet e celular.</p>
    </div>
  </div>
</div>

📌 Uso: Seção principal com foto, sobre a empresa, call to action.

🔹 4. Colunas Desproporcionais (8/4)

<div class="container my-4">
  <div class="row">
    <div class="col-md-8 bg-info text-white p-4">Conteúdo principal</div>
    <div class="col-md-4 bg-warning p-4">Sidebar</div>
  </div>
</div>

📌 Uso: Blog com barra lateral, páginas de artigo.

📱 Como Funciona a Responsividade?

Use as classes com breakpoints para ajustar conforme o tamanho da tela:

Exemplo:

<div class="col-12 col-md-6 col-lg-4">Responsivo!</div>

💡 Dicas Profissionais

• Use .g-3 ou .gy-5 para aplicar espaçamento entre colunas.

• Utilize .order-md-2 para inverter colunas no desktop.

• Combine com cards, buttons, badges e icons para layouts mais ricos.

• Teste sempre em resoluções diferentes.

🎓 Aprenda Bootstrap do Zero ao Avançado

Se você gostou desse conteúdo, tenho um curso completo na Udemy com vídeo-aulas práticas e 5 projetos reais, desde landing pages até dashboards!

👉 Curso: Aprenda Bootstrap Completo - 5 Projetos Finais + Bônus

📦 Conteúdo ideal para:

• Iniciantes em desenvolvimento web

• Freelancers que querem criar sites para vender

• Empreendedores que desejam criar seu próprio site

✅ Conclusão

Dominar o sistema de grid do Bootstrap 5 é fundamental para criar layouts profissionais, responsivos e rápidos. Com esse conhecimento, você pode estruturar praticamente qualquer página de site moderno, seja um blog, portfólio, e-commerce ou landing page.

Agora é sua vez: copie os códigos, teste os layouts e construa seu próximo projeto!