Bootstrap: Layout Responsivo

Q: P: E se eu quiser um comportamento entre lg e md, e outro entre sm e xs?

R: O Bootstrap usa min-width para sobrescrever para cima. Você pode escrever d-none d-md-block d-xl-none para significar: oculto em xs-sm, visível em md-lg, oculto em xl+.

Q: P: Há diferença entre usar img-fluid para imagens responsivas e usar diretamente CSS max-width: 100% ?

R: Essencialmente o mesmo. .img-fluid é uma classe utilitária predefinida para max-width: 100%; height: auto;, projetada para integrar-se mais consistentemente com os componentes de imagem do Bootstrap.

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

1. Introdução à Lição

(1) Pré-requisitos

Dominar contêineres e alinhamento Flexbox (da Lição 5)
Familiarizado com as classes utilitárias justify-content-* e align-items-*

(2) 🎯 O que você aprenderá

Entender o sistema de 6 breakpoints do Bootstrap (xs/sm/md/lg/xl/xxl)
Dominar as classes utilitárias de exibição responsiva d-{breakpoint}-*
Aprender alinhamento de texto responsivo e controle de tamanho de fonte
Usar .img-fluid para imagens responsivas
Ser capaz de criar páginas responsivas multi-dispositivo de forma independente

(3) Ponto de Dor

Charlie está desenvolvendo um painel back-end: o desktop mostra uma barra lateral e tabela completas, o tablet recolhe a barra lateral, e o mobile esconde a barra lateral em favor de um menu hambúrguer. Implementar isso com media queries puras de CSS requer escrever muito código repetitivo.

(4) Solução

O Bootstrap fornece um sistema completo de classes utilitárias responsivas—basta inserir sufixos de breakpoint nos nomes das classes para aplicar estilos diferentes em tamanhos de tela diferentes. As classes utilitárias responsivas do Bootstrap tornam isso extremamente simples.

Entendendo: A responsividade é como um cabide telescópico—a mesma estrutura HTML ajusta automaticamente seu layout para telas de larguras diferentes. Os breakpoints do Bootstrap são as engrenagens: mobile, tablet, desktop, tela grande, tela extra-grande.

(5) Benefícios

Depois de usar as classes utilitárias responsivas do Bootstrap, Charlie alcançou adaptação multi-dispositivo com classes como d-none d-md-block e col-12 col-md-6, aumentando significativamente a eficiência de desenvolvimento.

2. Sistema de Breakpoints

▶ Exemplo: Visão Geral do Sistema de Breakpoints

O Bootstrap 5 define 6 breakpoints, baseados em min-width (mobile-first):

Breakpoint	Classe	Largura Mínima	Dispositivos Típicos
Extra small	none	< 576px	Mobile retrato
Small	`sm`	>= 576px	Mobile paisagem
Medium	`md`	>= 768px	Tablets
Large	`lg`	>= 992px	Laptops
Extra large	`xl`	>= 1200px	Monitores desktop
Extra extra large	`xxl`	>= 1400px	Telas extra-grandes

graph LR
    subgraph Breakpoints do Bootstrap (min-width)
        A[xs 0-575px] --> B[sm 576-767px]
        B --> C[md 768-991px]
        C --> D[lg 992-1199px]
        D --> E[xl 1200-1399px]
        E --> F[xxl 1400px+]
    end

Output: Components styled with Bootstrap 5.3 (such as buttons, cards, carousels, collapses, etc.) will render. The page uses the Bootstrap default theme (light) and responsive grid by default. Significado de mobile-first: Escreva os estilos para telas pequenas primeiro, depois use breakpoints min-width para sobrescrever para telas maiores. Classes sem breakpoint se aplicam a todas as telas; com breakpoint se aplicam apenas acima da largura especificada.

3. Classes Utilitárias de Exibição: d-*

Controla visibilidade/ocultação do elemento em telas diferentes:

HTML

<div class="d-none d-md-block bg-primary text-white p-3 mb-2">
  Visível em telas md+, oculto no mobile
</div>

<div class="d-block d-md-none bg-success text-white p-3 mb-2">
  Visível no mobile, oculto em telas md+
</div>

▶ Experimente

Output: Components styled with Bootstrap 5.3 (such as buttons, cards, carousels, collapses, etc.) will render. The page uses the Bootstrap default theme (light) and responsive grid by default.

(1) Modos Comuns de Exibição Responsiva

Requisito	Implementação
Oculto no mobile, visível no tablet+	`d-none d-md-block`
Visível no mobile, oculto no tablet+	`d-block d-md-none`
Sempre oculto	`d-none`
Visível ao imprimir	`d-none d-print-block`

4. Texto Responsivo

HTML

<!-- Alinhamento de texto responsivo -->
<p class="text-center text-md-start">
  Centralizado no mobile, alinhado à esquerda em md+
</p>

<!-- Tamanho de fonte responsivo -->
<p class="fs-6 fs-md-5 fs-lg-4">
  Fica maior em telas maiores
</p>

<!-- Cor de texto responsiva -->
<p class="text-muted text-md-primary">
  Cinza no mobile, azul no tablet+
</p>

▶ Experimente

Output: Components styled with Bootstrap 5.3 (such as buttons, cards, carousels, collapses, etc.) will render. The page uses the Bootstrap default theme (light) and responsive grid by default.

Implementação	Mobile	Tablet+
`text-center text-md-start`	Centralizado	Alinhado à esquerda
`text-start text-lg-center`	Alinhado à esquerda	Centralizado no desktop

5. Margens e Espaçamento Responsivos

HTML

<div class="container">
  <div class="card p-3 p-md-4 p-lg-5 mb-3 mb-md-0">
    <h5>Card Responsivo</h5>
    <p class="mb-0 mb-md-2">Padding e margin se adaptam ao tamanho da tela.</p>
  </div>

  <div class="d-flex flex-column flex-md-row gap-2 gap-md-3">
    <button class="btn btn-primary">Salvar</button>
    <button class="btn btn-secondary">Cancelar</button>
  </div>
</div>

▶ Experimente

Output: Components styled with Bootstrap 5.3 (such as buttons, cards, carousels, collapses, etc.) will render. The page uses the Bootstrap default theme (light) and responsive grid by default.

Requisito	Implementação
Compacto no mobile, espaçoso no desktop	`p-3 p-md-5`
Empilhado no mobile, lado a lado no desktop	`flex-column flex-md-row`
Gap pequeno no mobile, gap maior no desktop	`gap-2 gap-lg-4`

6. Imagens Responsivas

HTML

<img src="https://via.placeholder.com/1200x600" class="img-fluid" alt="Imagem responsiva">

▶ Experimente

Output: Components styled with Bootstrap 5.3 (such as buttons, cards, carousels, collapses, etc.) will render. The page uses the Bootstrap default theme (light) and responsive grid by default. .img-fluid é equivalente a max-width: 100%; height: auto;—a imagem não excederá a largura do contêiner pai e escala proporcionalmente.

HTML

<img src="https://via.placeholder.com/400x400" class="img-fluid rounded-circle" alt="Circular" style="max-width: 200px;">
<img src="https://via.placeholder.com/200x200" class="img-thumbnail" alt="Miniatura">

▶ Experimente

Output: Components styled with Bootstrap 5.3 (such as buttons, cards, carousels, collapses, etc.) will render. The page uses the Bootstrap default theme (light) and responsive grid by default.

Classe	Efeito
`img-fluid`	Largura responsiva
`img-thumbnail`	Borda arredondada de 1px
`rounded`	Cantos arredondados

7. Referência de Breakpoints e Classes Utilitárias de Exibição

(1) Referência Completa de Breakpoints

Nome do Breakpoint	Classe	Largura Mín	Largura Máx Contêiner	Dispositivos Típicos
Extra Small	none	0px	100%	Mobile retrato
Small	`sm`	576px	540px	Mobile paisagem
Medium	`md`	768px	720px	Tablets
Large	`lg`	992px	960px	Laptops
Extra Large	`xl`	1200px	1140px	Monitores desktop
Extra Extra Large	`xxl`	1400px	1320px	Telas extra-grandes

(2) Referência de Classes Utilitárias de Exibição

Classe	Efeito	Uso Típico
`d-none`	Sempre oculto	Ocultar elemento
`d-block`	Sempre bloco	Mostrar elemento
`d-inline`	Sempre inline	Texto inline
`d-inline-block`	Sempre inline-block	Ícone + texto
`d-flex`	Contêiner flex	Contêiner de layout
`d-none d-md-block`	Oculto no mobile, visível no tablet+	Barra lateral responsiva
`d-block d-md-none`	Visível no mobile, oculto no tablet+	Menu hambúrguer
`d-none d-print-block`	Visível apenas ao imprimir	Layout de impressão

▶ Exemplo: Galeria de Imagens 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>Galeria Responsiva</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="text-center mb-4">Galeria de Imagens Responsiva</h3>
    <div class="row g-3">
      <div class="col-6 col-md-4 col-lg-3">
        <img src="https://via.placeholder.com/300x200/0d6efd/fff?text=1" class="img-fluid rounded" alt="img1">
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <img src="https://via.placeholder.com/300x200/198754/fff?text=2" class="img-fluid rounded" alt="img2">
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <img src="https://via.placeholder.com/300x200/dc3545/fff?text=3" class="img-fluid rounded" alt="img3">
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <img src="https://via.placeholder.com/300x200/ffc107/000?text=4" class="img-fluid rounded" alt="img4">
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <img src="https://via.placeholder.com/300x200/6f42c1/fff?text=5" class="img-fluid rounded" alt="img5">
      </div>
      <div class="col-6 col-md-4 col-lg-3">
        <img src="https://via.placeholder.com/300x200/20c997/fff?text=6" class="img-fluid rounded" alt="img6">
      </div>
    </div>
    <p class="text-muted text-center mt-3">col-6 → col-md-4 → col-lg-3, cada imagem usa img-fluid para responsividade</p>
  </div>
</body>
</html>

▶ Experimente

Output: Components styled with Bootstrap 5.3 (such as buttons, cards, carousels, collapses, etc.) will render. The page uses the Bootstrap default theme (light) and responsive grid by default.

▶ Exemplo: Tipografia 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>Tipografia Responsiva</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="text-center text-md-start mb-4">Tipografia Responsiva</h3>

    <p class="fs-6 fs-md-5 fs-lg-4 text-center text-md-start">
      Tamanho da fonte aumenta com a tela: Mobile fs-6 → Tablet fs-5 → Desktop fs-4.<br>
      <code>.fs-6 .fs-md-5 .fs-lg-4</code>
    </p>

    <hr>

    <p class="text-muted text-md-primary text-lg-success text-center text-md-start">
      Cor de texto responsiva: Mobile cinza → Tablet azul → Desktop verde.<br>
      <code>.text-muted .text-md-primary .text-lg-success</code>
    </p>

    <hr>

    <div class="d-flex flex-column flex-md-row justify-content-center justify-content-md-between align-items-center bg-light p-3 rounded">
      <span class="badge bg-primary fs-6 fs-md-5 mb-2 mb-md-0">Emblema Um</span>
      <span class="badge bg-success fs-6 fs-md-5 mb-2 mb-md-0">Emblema Dois</span>
      <span class="badge bg-danger fs-6 fs-md-5">Emblema Três</span>
    </div>
  </div>
</body>
</html>

▶ Experimente

Output: Components styled with Bootstrap 5.3 (such as buttons, cards, carousels, collapses, etc.) will render. The page uses the Bootstrap default theme (light) and responsive grid by default.

▶ Exemplo: Espaçamento Responsivo

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Espaçamento Responsivo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <!-- Hero com padding responsivo -->
    <div class="bg-primary text-white p-3 p-md-5 rounded text-center text-md-start">
      <h1 class="display-6">Espaçamento Responsivo</h1>
      <p class="mb-0">Mobile p-3 (16px), Desktop p-5 (48px)</p>
    </div>

    <!-- Seções empilhadas -->
    <section class="my-4 p-3 p-lg-4 bg-light rounded">
      <h5>Seção Um</h5>
      <p>my-4 garante espaçamento vertical, p-3 para padding no mobile, p-lg-4 para padding em tela grande.</p>
    </section>

    <section class="my-4 p-3 p-lg-4 bg-light rounded">
      <h5>Seção Dois</h5>
      <p class="mb-0 mb-md-2">O espaçamento abaixo do texto também é responsivo.</p>
      <p class="d-none d-md-block">Este parágrafo aparece apenas em telas md+.</p>
    </section>

    <section class="my-4 p-3 p-lg-4 bg-light rounded">
      <h5>Seção Três</h5>
      <p>Todas as seções usam as mesmas classes de espaçamento para consistência.</p>
    </section>

    <div class="d-flex flex-column flex-md-row gap-2 gap-md-3 justify-content-md-end">
      <button class="btn btn-outline-secondary">Cancelar</button>
      <button class="btn btn-primary">Enviar</button>
    </div>
  </div>
</body>
</html>

▶ Experimente

Output: Components styled with Bootstrap 5.3 (such as buttons, cards, carousels, collapses, etc.) will render. The page uses the Bootstrap default theme (light) and responsive grid by default.

▶ Exemplo: Tabela 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>Tabela Responsiva</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-3">Tabela Responsiva</h3>
    <p class="text-muted small mb-3">Oculta as colunas "Departamento" e "Status" no mobile, mostra todas no tablet+</p>

    <div class="table-responsive">
      <table class="table table-bordered">
        <thead class="table-dark">
          <tr>
            <th>#</th>
            <th>Nome</th>
            <th class="d-none d-md-table-cell">Departamento</th>
            <th>E-mail</th>
            <th class="d-none d-md-table-cell">Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>John Doe</td>
            <td class="d-none d-md-table-cell">Tech</td>
            <td>john@example.com</td>
            <td class="d-none d-md-table-cell"><span class="badge bg-success">Ativo</span></td>
          </tr>
          <tr>
            <td>2</td>
            <td>Jane Smith</td>
            <td class="d-none d-md-table-cell">Marketing</td>
            <td>jane@example.com</td>
            <td class="d-none d-md-table-cell"><span class="badge bg-warning">Experiência</span></td>
          </tr>
          <tr>
            <td>3</td>
            <td>Mike Johnson</td>
            <td class="d-none d-md-table-cell">Design</td>
            <td>mike@example.com</td>
            <td class="d-none d-md-table-cell"><span class="badge bg-danger">Desligado</span></td>
          </tr>
        </tbody>
      </table>
    </div>

    <p class="text-muted small">
      Dica: Use <code>d-none d-md-table-cell</code> para ocultar colunas no mobile. Use <code>table-responsive</code> para evitar overflow da tabela.
    </p>
  </div>
</body>
</html>

▶ Experimente

Output: Components styled with Bootstrap 5.3 (such as buttons, cards, carousels, collapses, etc.) will render. The page uses the Bootstrap default theme (light) and responsive grid by default.

❓ Perguntas Frequentes

P: O que significa "mobile-first"? Por que os estilos de tela grande usam sufixos de breakpoint? R: Mobile-first significa que os estilos base (sem breakpoint) são para telas pequenas, e estilos com breakpoint sobrescrevem para telas maiores. Por exemplo, d-none d-md-block: d-none se aplica a todas as telas (oculta), enquanto d-md-block sobrescreve para mostrar em md e acima.

P: E se eu quiser um comportamento entre lg e md, e outro entre sm e xs? R: O Bootstrap usa min-width para sobrescrever para cima. Você pode escrever d-none d-md-block d-xl-none para significar: oculto em xs-sm, visível em md-lg, oculto em xl+.

P: Há diferença entre usar img-fluid para imagens responsivas e usar diretamente CSS max-width: 100%? R: Essencialmente o mesmo. .img-fluid é uma classe utilitária predefinida para max-width: 100%; height: auto;, projetada para integrar-se mais consistentemente com os componentes de imagem do Bootstrap.

P: O Bootstrap tem classes relacionadas a estilos de impressão? R: Sim. O Bootstrap 5 fornece a série de classes utilitárias d-print-*, como d-print-none (oculto ao imprimir) e d-print-block (visível ao imprimir). Também fornece display-print-* para controlar o valor de display durante a impressão. Essas classes se aplicam apenas em mídia de impressão e são ótimas para otimizar layouts de impressão.

P: Como customizo breakpoints? R: Customizar breakpoints requer modificar as variáveis Sass $grid-breakpoints e $container-max-widths (detalhado na Fase 5). Se usar apenas sobrescritas CSS, você pode escrever media queries como @media (min-width: 1600px) { ... }, mas classes utilitárias de breakpoint customizadas (como d-xxl-block) não serão auto-geradas. Recomenda-se usar os breakpoints padrão do Bootstrap sempre que possível.

📖 Resumo

O Bootstrap tem 6 breakpoints: xs/sm/md/lg/xl/xxl, baseados em min-width (mobile-first)
Classes utilitárias + sufixos de breakpoint = controle responsivo: d-{breakpoint}-*, text-{breakpoint}-*, p-{breakpoint}-*
d-none d-md-block é o padrão de alternância de exibição mais comum
.img-fluid torna imagens responsivas

📝 Exercícios

⭐ Crie uma navbar responsiva: mobile usa flex-column para links verticais, tablet+ usa flex-row para horizontal.
⭐⭐ Crie um card responsivo de três níveis: mobile p-2, tablet p-4, desktop p-5, texto centralizado no mobile e alinhado à esquerda no desktop.
⭐⭐⭐ Crie uma tabela que oculta as colunas 3 e 4 no mobile (d-none d-md-table-cell) e mostra todas as colunas no desktop.

Lição Anterior: Flexbox · Próxima Lição: Grade

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.

Sobre Nós