O Bootstrap 5 é a versão mais recente da estrutura do bootstrap que permite que seus usuários criem sites responsivos com uma abordagem móvel primeiro. O Bootstrap 5 possui muitos recursos distintos, como as folhas de estilos rápidas e a capacidade de resposta aprimorada. Uma necessidade básica dessa estrutura é um contêiner para envolver os elementos que aparecem em um site. Um contêiner é o layout mais fundamental do Bootstrap 5, que discutiremos detalhadamente neste artigo.

Vamos começar.

O que são contêineres

Como já mencionado, os contêineres são considerados o layout mais fundamental do bootstrap 5. Essas entidades envolvem elementos dentro deles junto com certos preenchimentos e margem. Além disso, eles são essenciais para a construção de um layout de grade.

Há um total de três tipos de contêineres no bootstrap 5, que alistamos abaixo.

1. Recipientes com largura fixa
2. Recipientes com largura total
3. Contêineres com pontos de interrupção responsivos

Vamos discuti -los em detalhes.

Recipientes com largura fixa

Você pode criar um recipiente responsivo com largura fixa usando o .classe de contêiner. Essa largura mudará dependendo do tipo de dispositivo e do tamanho da tela. Agora vamos explorar esse tipo de contêiner com um exemplo.

Exemplo

Aqui estamos envolvendo algum conteúdo usando o contêiner com largura fixa.

Html

Aqui estamos, antes de tudo.

Html

Olá Mundo

Bootstrap 5 é incrível.

Estamos aprendendo tipos de recipientes no bootstrap 5.

Esta é uma demonstração do recipiente de largura fixa que usa o .classe de contêiner.

Agora estamos criando um contêiner div e o designou o contêiner de classe. Então nós aninhamos um

, e três

elementos naquele contêiner div.

Saída

Vamos mostrar a saída em tamanhos de tela aleatórios. Por exemplo, a saída em 699px e acima é mostrada abaixo.

A 351px e menos.

O .recipiente A classe foi implementada com sucesso.

Recipientes com largura total

Com o objetivo de criar recipientes com largura total, use o .Fluid de contêiner aula. A largura do contêiner será 100%, independentemente do tamanho da tela. O exemplo apresentado abaixo demonstra um contêiner de largura total.

Html

Olá Mundo

Bootstrap 5 é incrível.

Estamos aprendendo tipos de recipientes no bootstrap 5.

Esta é uma demonstração do recipiente de largura fixa que usa .classe de contêiner.

Aqui estamos usando .Classe de fluido de contêineres para criar um elemento div e aninhar um título, e alguns parágrafos dentro daquela div.

Saída

Vamos mostrar a saída em tamanhos de tela aleatórios. A primeira saída é para a largura da tela 700px e acima.

A 355px e abaixo.

O .Fluid de contêiner A aula está funcionando corretamente.

Contêineres com pontos de interrupção responsivos

Você também pode criar contêineres que retêm 100% de largura até que um ponto de interrupção seja especificado. Isso significa que a largura começará a mudar após esse ponto de interrupção em particular. Para um melhor entendimento, demonstramos um exemplo aqui.

Exemplo

Aqui demonstramos todos os pontos de interrupção mencionados acima.

Você também pode criar contêineres que retêm 100% de largura até que um ponto de interrupção seja especificado. Isso significa que a largura começará a mudar após esse ponto de interrupção em particular. Para um melhor entendimento, demonstramos um exemplo aqui.
Exemplo
Aqui demonstramos todos os pontos de interrupção mencionados acima.
[cce_html width = "100%" altura = "100%" escape = "true" tema = "Blackboard" Nowrap = "0"]
Pequeno
Médio
Grande
Extra grande
Extra extra grande

No código acima, criamos cinco contêineres de div e cada um recebeu uma classe específica correspondente a um ponto de interrupção específico.

Saída

Pontos de interrupção foram implementados com sucesso.

Observação: Visite o site oficial do Bootstrap 5 para conferir as larguras de vários recipientes no Bootstrap 5 em certos pontos de interrupção.

Conclusão

Os contêineres são considerados o layout mais fundamental do bootstrap 5 que são usados ​​para envolver elementos dentro deles, juntamente com certos preenchimentos e margem. Além disso, eles são essenciais para a construção de um layout de grade. Há um total de três tipos de contêineres que são; Recipientes com largura fixa, recipientes com largura total e recipiente com pontos de interrupção responsivos. Existem certas classes internas associadas a esses recipientes. Todos esses tipos de contêineres são explicados no artigo, juntamente com exemplos adequados.