Breakpoints do Bootstrap 5 e grid responsivo explicados

O Bootstrap 5 tem seis níveis responsivos: extra small (abaixo de 576 px), sm (a partir de 576 px), md (768 px), lg (992 px), xl (1200 px) e xxl (1400 px). Todas as classes responsivas usam esses nomes, então col-md-6 significa “metade da largura a partir de 768 px” e d-lg-none significa “oculto a partir de 992 px”. Assim como o Tailwind, o Bootstrap é mobile first: classes sem breakpoint valem para todos os tamanhos, e classes com breakpoint valem daquela largura para cima.

Breakpoints do Bootstrap 5 e largura dos containers

Esses são os valores padrão da documentação de breakpoints do Bootstrap. O .container-fluid ocupa sempre toda a largura, e o .container-md (e os outros infixos) ocupa toda a largura até o seu breakpoint e depois fica fixo.

O grid responsivo na prática

O grid do Bootstrap tem 12 colunas. Você define quantas cada elemento ocupa em cada breakpoint:

<div class="container">
  <div class="row g-4">
    <div class="col-12 col-md-6 col-lg-4">Card</div>
    <div class="col-12 col-md-6 col-lg-4">Card</div>
    <div class="col-12 col-md-6 col-lg-4">Card</div>
  </div>
</div>

O resultado é um card por linha no celular, dois a partir de 768 px e três a partir de 992 px. Dá para omitir o col-12, já que uma coluna sem tamanho dentro de uma row se estica de qualquer forma, mas escrever deixa a intenção mais clara.

Para grids de itens iguais, as row columns são mais curtas:

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-3">

Para reordenar o conteúdo em um breakpoint, use as classes order, como order-first order-md-0. Isso ajuda quando uma imagem deve vir depois do título no celular, mas ficar ao lado dele no desktop.

Utilitários responsivos que você vai usar o tempo todo

• Display: d-none d-md-block esconde no celular e mostra a partir de 768 px; d-lg-none esconde a partir de 992 px.
• Direção do flex: flex-column flex-md-row empilha no celular e alinha em linha a partir de md.
• Espaçamento: p-3 p-lg-5 usa padding menor em telas pequenas.
• Alinhamento de texto: text-center text-md-start.
• Navbar: navbar-expand-lg mostra o menu completo a partir de 992 px e o botão hambúrguer abaixo disso.
• Tabelas: envolva tabelas largas em .table-responsive para que rolem dentro da própria caixa.
• Imagens: .img-fluid define max-width: 100% e height: auto.

Mixins de media query no Sass

Se você compila o Bootstrap a partir do Sass, use os mixins dele em vez de valores em pixels fixos no código:

.hero {
  padding: 2rem 1rem;

  @include media-breakpoint-up(lg) {
    padding: 5rem 2rem;
  }
}

@include media-breakpoint-down(md) { /* abaixo de 768px */ }
@include media-breakpoint-between(md, xl) { /* de 768px a 1199.98px */ }
@include media-breakpoint-only(md) { /* de 768px a 991.98px */ }

Atenção ao significado de media-breakpoint-down(md) no Bootstrap 5: ele mira larguras abaixo do breakpoint md, compilado como max-width: 767.98px. O .98 evita sobreposição com larguras fracionadas em telas de alta densidade. No Bootstrap 4, o mesmo mixin usava o breakpoint seguinte, o que pega muita gente de surpresa na atualização.

Como personalizar os breakpoints do Bootstrap

Altere os maps do Sass antes de importar o Bootstrap:

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 1024px,
  xl: 1280px,
  xxl: 1536px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1200px,
  xxl: 1440px
);

@import "bootstrap/scss/bootstrap";

Mantenha as chaves em ordem crescente e mantenha xs: 0. Vale a pena mudar? Só se o seu design tiver um motivo real. O guia de breakpoints responsivos explica como escolher larguras a partir do conteúdo, e não de listas de aparelhos.

Erros comuns de responsividade com Bootstrap

• Usar col-6 no celular. Duas colunas numa tela de 360 px deixam cerca de 160 px por coluna depois dos gutters; texto e botões raramente cabem.
• Esquecer o breakpoint da navbar. Uma navbar com muitos itens e navbar-expand-md pode estourar entre 768 e 992 px.
• Esconder conteúdo com d-none no celular em vez de reorganizar. O Google indexa a versão mobile da página.
• Misturar media queries próprias com valores diferentes dos do Bootstrap, de modo que os componentes mudam em 768 px e o seu CSS em 760 px.

Como testar um layout com Bootstrap

Confira cada nível na largura exata e 1 px abaixo: 575/576, 767/768, 991/992, 1199/1200 e 1399/1400. No Chrome DevTools, a opção Show media queries da barra de dispositivos mostra os breakpoints como barras clicáveis.

Depois confira celulares específicos com o user agent e a densidade de pixels deles, algo que o Mobile View Extension faz com um botão. O processo completo está em como testar a responsividade de um site.

Perguntas frequentes

Quais são os breakpoints do Bootstrap 5?

576 px (sm), 768 px (md), 992 px (lg), 1200 px (xl) e 1400 px (xxl), com um nível extra small sem nome abaixo de 576 px.

O que significa col-md-6 no Bootstrap?

O elemento ocupa 6 de 12 colunas, metade da linha, a partir do breakpoint md (768 px). Abaixo de 768 px ele ocupa toda a largura, a menos que outra classe diga o contrário.

O Bootstrap é mobile first?

Sim. Classes sem breakpoint valem para todos os tamanhos de tela, e classes com breakpoint as sobrescrevem daquela largura para cima.