Bootstrap 5 colunas e sistema de grade | Explicado

Bootstrap 5 é a versão mais recente da estrutura do bootstrap que permite que seus usuários criem sites incríveis com folhas de estilo CSS rápidas e resposta aprimorada. O Bootstrap funciona construindo um sistema de grade que divide uma página da web em várias linhas e colunas que são embrulhadas dentro de um contêiner. Este post discute o sistema de grade no Bootstrap 5 em detalhes, juntamente com seus vários componentes.

Sistema de grade no bootstrap 5

Um sistema de grade no Bootstrap 5 divide uma página em linhas e colunas, com cada linha com 12 colunas. Você pode usar todas as 12 colunas, se desejar, no entanto, senão você pode combinar colunas para criar colunas mais amplas. Você precisa utilizar colunas de uma maneira que a soma soma até 12 ou menos de 12. Por exemplo, você pode usar todas as 12 colunas com uma largura de 1 ou 2 colunas com uma largura de 6. Seja qual for a combinação, o total deve ser 12 ou menos.

Este sistema de grade é composto de Flexbox, tornando os elementos presentes na grade responsiva, o que significa que o layout mudará sua estrutura, dependendo do dispositivo em que está sendo exibido. Aqui está uma representação visual de um sistema de grade.

Aulas de grade no bootstrap 5

Para fins de utilização do sistema de grade, existem várias classes disponíveis que discutimos abaixo. Todas essas classes podem ser agrupadas para tornar estruturas mais flexíveis e responsivas.

1. -XS- Classe

Esta classe é usada para criar um sistema de grade para dispositivos extras pequenos com uma largura de tela <576px.

2. -SM- classe

Esta classe é usada para fazer um layout de grade para dispositivos pequenos com uma largura de tela> = 576px.

3. -MD-classe

Esta classe é usada para criar um sistema de grade para dispositivos médios com uma largura de tela> = 768px.

4. -Classe LG

Esta classe é usada para criar um sistema de grade para dispositivos grandes com uma largura de tela> = 992px.

5. -XL- classe

Esta classe é usada para criar um sistema de grade para dispositivos extra-áreas com uma largura de tela> = 1200px.

6. -xxl- classe

Esta classe é usada para criar um sistema de grade para dispositivos extra-grande com uma largura de tela> = 1400px.

Observação: As classes acima têm a capacidade de aumentar a largura; portanto, se você deseja usar a mesma largura para classes médias e grandes, por exemplo, precisa especificar a largura apenas para classe média.

Componentes de um sistema de grade

Um sistema de grade funciona com três componentes que são discutidos nesta seção.

1. Containers

Um contêiner é um elemento básico de um sistema de grade sem o qual o sistema não funciona. Estes envolvem todo o conteúdo de um site dentro deles. Os contêineres envolvem o conteúdo de forma que esses elementos de retenção e elementos da linha segure os elementos da coluna.

2. Linhas

As linhas em um sistema de grade são chamadas de grupo horizontal de colunas. Essas linhas podem ser geradas usando o .linha classe e são embrulhados dentro de um recipiente usando o .recipiente, ou .Fluid de contêiner aula.

3. Colunas

Um sistema de grade consiste em 12 colunas que estão embrulhadas em linhas. Para criar essas colunas .col A classe é usada junto com a combinação de qualquer uma das classes mencionadas na seção anterior. Por exemplo, se você estiver criando um layout para dispositivos extras pequenos, use .col-xs aula.

Construindo um sistema básico de grade no bootstrap 5

Aqui vamos demonstrar como você pode fazer um sistema básico de grade em dois cenários diferentes.

Cenário 1

Quando você deseja controlar a largura das colunas e especificar o layout para diferentes tipos de dispositivos que o exibirão.

Dessa forma, você pode construir uma estrutura básica de um sistema de grade quando deseja especificar as larguras da coluna para diferentes tipos de dispositivos. O .linha A classe é usada para gerar linhas, por exemplo, o acima cria duas linhas. A primeira linha agrupa três colunas, enquanto a segunda linha tem duas colunas.

Ao gerar colunas, use o .col classe, além de especificar o tipo de dispositivo e um número que deve adicionar um total de 12 para cada linha.

Cenário 2

Quando você deseja o bootstrap para lidar com a largura das colunas automaticamente.

Agora, quando você não especifica o tamanho do dispositivo e nenhum número que soma um total de 12, o Bootstrap 5 lidará com as larguras automaticamente e o layout mudará seu comportamento de acordo com o tipo de dispositivo.

Alguns exemplos

Agora vamos explorar alguns exemplos para entender melhor um sistema de grade e colunas no bootstrap 5.

Exemplo 1

Aqui vamos gerar quatro colunas de igual largura.

Html

No código acima para criar quatro colunas de igual largura, estamos usando o .Fluid de contêiner classe para obter um recipiente de largura total que se estende pela largura completa da viewport. Então estamos gerando uma linha e encerrando quatro colunas de igual largura dentro dessa linha. Cada coluna recebeu um certo preenchimento usando o .P-4 Aula de preenchimento e utilidade, além disso, cada coluna recebeu alguma cor de fundo e cor de texto.

Saída

Colunas com larguras iguais foram criadas com sucesso.

Exemplo 2

No exemplo acima, vimos como podemos fazer quatro colunas de igual largura. Agora vamos tornar essas colunas responsivas.

Html

Estamos tornando as colunas responsivas usando o .COL-MD-3 classe que especifica que as colunas se acumulam quando a largura da tela for menor que 768px.

Saída

Quando a largura da tela é igual a e maior que 768px.

Quando a largura da tela é menor que 768px.

Colunas responsivas foram geradas.

Exemplo 3

As colunas responsivas acima eram iguais em largura. Agora vamos gerar colunas responsivas de largura desigual.

Html

O .COL-MD-4, e .COL-MD-8 As aulas fazem duas colunas responsivas de largura desigual para dispositivos médios.

Saída

Quando a largura da tela é> = 768px.

Quando a largura da tela é <768px.

Duas colunas responsivas com largura desigual foram geradas.

Conclusão

Um sistema de grade no Bootstrap 5 funciona com três componentes que são um recipiente, linhas e colunas. Basicamente, divide uma página em linhas e colunas, com cada linha com 12 colunas. As colunas de um sistema de grade são utilizadas de uma maneira que a soma soma até 12 ou menos de 12. Além disso, ele usa algumas classes para criar layouts responsivos para vários tipos de dispositivos. Este post discute o sistema de grade e as colunas em detalhes com a ajuda de exemplos apropriados.