Breakpoints e Containers no Bootstrap
Olá! Nesta publicação, vou explicar de forma simples e direta como funcionam os breakpoints — ou, mais especificamente, as @mediaqueries — do Bootstrap. De início, quero mostrar para que servem os breakpoints e por que eles são tão úteis no desenvolvimento de um site responsivo. Além de garantir flexibilidade, eles proporcionam mais agilidade e controle durante a criação do layout do nosso site, Vamos nessa!
Os breakpoints permitem que, dentro de uma mesma classe, você defina diferentes propriedades e comportamentos para seis larguras de tela já estabelecidas pelo Bootstrap. São elas:
Extra small: para largura de tela menor que 576 pixels (celulares mais compridos).
Small: para larguras entre 576 e 767 pixels (smartphones).
Medium: para larguras entre 768 e 991 pixels (iPads e tablets).
Large: para larguras entre 992 e 1199 pixels (notebooks).
Extra large: para larguras entre 1200 e 1399 pixels (monitores grandes).
Extra extra large: para larguras iguais ou superiores a 1400 pixels (TVs).
Em seguida, cada breakpoint é dividido em 12 colunas de container, tema que abordaremos agora.
O container é o elemento mais básico do Bootstrap e se torna essencial quando utilizamos o sistema de grid para organizar os elementos da página. O Bootstrap oferece três tipos de containers:
.container: define uma largura máxima fixa para cada breakpoint.
.container-[breakpoint]: define largura de 100% até antes do breakpoint especificado.
.container-fluid: define largura de 100% em todos os breakpoints.
A seguir, uma tabela exemplificando as max-width dos diferentes containers em cada breakpoint:
| Breakpoint | Classe | Max-width |
|---|---|---|
| Extra small (xs) | .container | 100% |
| Small (sm) | .container-sm | 540px |
| Medium (md) | .container-md | 720px |
| Large (lg) | .container-lg | 960px |
| Extra large (xl) | .container-xl | 1140px |
| Extra extra large (xxl) | .container-xxl | 1320px |
Isso é tudo, pessoal! Sou estudante com o objetivo de me tornar full-stack e estou explorando o mundo do desenvolvimento web. Qualquer dica para minha jornada será muito bem-vinda. Até a próxima! 😸