Layouts Responsivos na Prática

---

O Que É um Layout Responsivo?

Um layout responsivo é aquele que se ajusta dinamicamente ao tamanho da tela do usuário, oferecendo uma ótima experiência tanto em celulares quanto em computadores.

No Bootstrap, isso acontece utilizando:

• O grid responsivo, controlado por breakpoints.

• Utilitários de visibilidade e espaçamento adaptáveis.

---

Como Funciona a Responsividade no Bootstrap?

O Bootstrap utiliza uma abordagem chamada mobile-first, onde você começa construindo para telas pequenas e, com os breakpoints, define ajustes para telas maiores.

---

Exemplo Prático de Layout Responsivo

Copy<div class="container">
  <div class="row">
    <div class="col-12 col-md-8">Conteúdo Principal</div>
    <div class="col-12 col-md-4">Sidebar</div>
  </div>
</div>

Comportamento:

• Mobile: As duas colunas ocupam 100% da largura (uma abaixo da outra).

• Tablet para cima (≥ 768px): A coluna principal ocupa 8/12 (66%) e a sidebar 4/12 (33%).

---

Utilizando Breakpoints na Prática

Layout empilhado no mobile e em colunas no desktop:

Copy<div class="row">
  <div class="col-12 col-lg-6">Metade no desktop, 100% no mobile</div>
  <div class="col-12 col-lg-6">Metade no desktop, 100% no mobile</div>
</div>

Três colunas no desktop, empilhadas no mobile:

Copy<div class="row">
  <div class="col-12 col-md-4">Coluna 1</div>
  <div class="col-12 col-md-4">Coluna 2</div>
  <div class="col-12 col-md-4">Coluna 3</div>
</div>

---

Exemplo de Layout Completo

Imagine um layout clássico com:

• Cabeçalho

• Menu lateral (visível apenas em telas grandes)

• Conteúdo principal

• Rodapé

Copy<div class="container">
  <!-- Cabeçalho -->
  <div class="row">
    <div class="col-12">Cabeçalho</div>
  </div>

  <!-- Corpo -->
  <div class="row">
    <div class="col-12 col-md-3">Menu Lateral</div>
    <div class="col-12 col-md-9">Conteúdo Principal</div>
  </div>

  <!-- Rodapé -->
  <div class="row">
    <div class="col-12">Rodapé</div>
  </div>
</div>

Comportamento:

• No mobile, o menu lateral fica acima ou abaixo do conteúdo principal.

• No desktop, o menu lateral ocupa 1/4 da tela e o conteúdo principal ocupa 3/4.

---

Boas Práticas Para Layouts Responsivos

• Sempre use a combinação de .col-12 para mobile e .col-md-* ou maiores para telas grandes.

• Planeje seu layout pensando primeiro no mobile, depois adapte para telas maiores.

• Use utilitários como mt-, mb-, d-none d-md-block para controle fino de espaçamento e visibilidade.