Layout e grid
Como o Bootstrap divide a tela e por que às vezes ela não divide do jeito que você esperava.
Grid Responsivo
Arraste a largura da tela de 320px a 1600px e veja as classes
col-md-6, col-lg-4 e
col-xl-3 assumindo o controle do layout.
Grid Avançado
Controle quanto cada bloco ocupa e veja a soma passar de 12 e a
linha quebrar. Entra offset-*, order-* e
o col sem número.
Containers
Por que o conteúdo trava numa largura e sobram faixas vazias.
container, container-fluid e
container-lg medidos lado a lado.
Gutters
O espaço entre colunas não é margem: é padding na coluna mais
margem negativa na .row. E é por isso que fundo
colorido em .col dá errado.
Flexbox
Os eixos desenhados na tela, girando junto com
flex-direction. É aqui que
justify-content para de ser "horizontal".
Responsividade
O que acontece fora do grid quando a tela muda de tamanho.
Utilitários Responsivos
O mesmo slider de largura, mas agora mostrando elementos
aparecendo e sumindo com d-none d-md-block,
flex-column flex-md-row e companhia.
Navbar Responsiva
Onde exatamente o menu vira hambúrguer. Troque o breakpoint de
navbar-expand-* e descubra por que ele não quer dizer
o que parece.
Estilo e componentes
Espaçamento, cores e as peças prontas que você monta com classes.
Escala de Espaçamento
Percorra a escala de 0 a 5 e veja quanto
vale cada degrau em rem e em pixels — e a diferença entre
m-* e p-*.
Cores do Tema
Mude $primary e veja vinte componentes mudarem junto,
com o hover, o clique e a cor do texto sendo derivados na hora.
Montador de Componentes
Ligue modificadores (btn-lg,
btn-outline-primary, rounded-pill) e veja
o HTML sendo escrito ao lado do resultado.
Formulário Responsivo
Onde o grid, os utilitários e os componentes se encontram:
form-floating, validação e campos se reorganizando
conforme a tela.