O conceito
O container é o invólucro mais externo de qualquer página Bootstrap.
Ele faz três coisas: dá um respiro nas laterais, centraliza o
conteúdo e — no caso do .container — impõe uma
largura máxima.
A parte que surpreende é que essa largura máxima
não cresce junto com a tela: ela
salta em degraus a cada breakpoint e fica parada entre um degrau e
outro. Num monitor de 1920px, um .container tem
1320px — os 600px restantes viram margem.
| A partir de | Largura máxima do .container |
Sobra numa tela desse tamanho |
|---|---|---|
| 0px | 100% | nenhuma |
| 576px | 540px | 36px |
| 768px | 720px | 48px |
| 992px | 960px | 32px |
| 1200px | 1140px | 60px |
| 1400px | 1320px | 80px |
As três famílias
Trava na largura máxima do breakpoint atual. É o padrão para conteúdo de leitura.
Nunca trava: sempre 100% da largura disponível. Para painéis, dashboards e barras de topo.
Fica fluido até lg e só então começa a travar.
Existe uma versão para cada breakpoint.
Largura da tela
As faixas hachuradas dos lados são o espaço que sobra — a diferença entre a tela e o container.
As medidas agora
| Classe | Largura ocupada | Sobra de cada lado | Está travado? |
|---|