O conceito
O Bootstrap divide qualquer linha (.row) em
12 colunas. Cada filho declara
quantas dessas 12 colunas quer ocupar. Se um bloco ocupa 4, cabem 3
por linha (12 ÷ 4 = 3).
A parte responsiva vem dos breakpoints: faixas de largura de tela. A regra é mobile-first — uma classe vale da sua largura mínima para cima, até que outra maior assuma.
| Breakpoint | Vale a partir de | Media query gerada |
|---|---|---|
xs | 0px | (nenhuma — é o padrão) |
sm | 576px | min-width: 576px |
md | 768px | min-width: 768px |
lg | 992px | min-width: 992px |
xl | 1200px | min-width: 1200px |
xxl | 1400px | min-width: 1400px |
Os 12 blocos do simulador abaixo usam exatamente estas classes:
<div class="col-12 col-md-6 col-lg-4 col-xl-3">Traduzindo: 1 por linha no celular (12 de 12), 2 a partir de 768px (6 de 12), 3 a partir de 992px (4 de 12) e 4 a partir de 1200px (3 de 12). Arraste o controle abaixo e veja acontecer.
Largura da tela