Compreendendo os números nas classes de grade do Bootstrap: col-md-4, col-xs-1, col-lg-2

O A estrutura Bootstrap apresenta um sistema de grade robusto que facilita a criação de layouts responsivos. Parte integrante deste sistema são classes com o formato col-*, onde o asterisco representa um número. Esses números desempenham um papel crucial na determinação de como os elementos de uma grade estão alinhados e como eles respondem a diferentes tamanhos de tela.

Como os números alinham as grades?

O número em uma classe col-* representa a parte da largura disponível que o elemento associado deve ocupar. A largura total de uma linha da grade é dividida em 12 colunas, e o número na classe indica o número de colunas que o elemento irá abranger.

Por exemplo, col-4 significa que o elemento irá abranger 4 colunas ou 1/3 da largura disponível. col-12 abrangerá toda a largura, ocupando todas as 12 colunas.

Como usar os números

Para usar essas classes, simplesmente atribua-as a elementos dentro de um linha da grade. Por exemplo, para criar duas colunas de largura igual em uma linha, você usaria:

Column 1
Column 2

Para criar três colunas de larguras diferentes, você pode usar:

Column 1
Column 2
Column 3

O que os números representam?

Além dos números em si, é importante observar o prefixos aplicados a eles. No Bootstrap, esses prefixos representam diferentes tamanhos de tela:

• xs: Extra pequeno (dispositivos móveis)
• sm: Pequeno (tablets)
• md: Médio (desktops) )
• lg: Large (desktops maiores)

Ao atribuir várias classes col-* a um elemento, você pode controlar como ele se comporta em cada um desses tamanhos de tela. Por exemplo, col-6 col-sm-4 significa que o elemento ocupará metade da largura em telas de dispositivos móveis e 1/3 da largura em tablets e desktops.

Conclusão

Compreender os números e prefixos nas classes de grade do Bootstrap é essencial para criar layouts web responsivos e adaptáveis. Ao aproveitar as classes col-* de forma eficaz, os desenvolvedores podem garantir que seus designs respondam perfeitamente a diferentes tamanhos de tela, proporcionando uma experiência de usuário consistente em todos os dispositivos.