Bootstrap 4 Contêineres
Containers
Você aprendeu no capítulo anterior que o Bootstrap requer um elemento de contenção para encapsular o conteúdo do site.
Os contêineres são usados para preencher o conteúdo dentro deles e há duas classes de contêiner disponíveis:
- A
.containerclasse fornece um contêiner de largura fixa responsivo - A
.container-fluidclasse fornece um contêiner de largura total , abrangendo toda a largura da janela de visualização
Contêiner Fixo
Use a .containerclasse para criar um contêiner responsivo de largura fixa.
Observe que sua largura ( max-width) mudará em diferentes tamanhos de tela:
|
Extra pequeno <576px |
Pequeno ≥576px |
Médio ≥768px |
Grande ≥992px |
Extra grande ≥1200px |
|
|---|---|---|---|---|---|
| largura máxima | 100% | 540px | 720px | 960px | 1140px |
Abra o exemplo abaixo e redimensione a janela do navegador para ver que a largura do contêiner mudará em diferentes pontos de interrupção:
Exemplo
<div class="container">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
Recipiente de fluido
Use a .container-fluidclasse para criar um contêiner de largura total, que sempre abrangerá toda a largura da tela ( widthé sempre 100%):
Exemplo
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
Acolchoamento do contêiner
Por padrão, os contêineres têm preenchimento esquerdo e direito de 15px, sem preenchimento superior ou inferior. Portanto, geralmente usamos utilitários de espaçamento , como preenchimento e margens extras para torná-los ainda melhores. Por exemplo, .pt-3significa "adicionar um preenchimento superior de 16px":
Exemplo
<div class="container pt-3"></div>
Você aprenderá muito mais sobre utilitários de espaçamento em nosso Capítulo Utilitários BS4 .
Borda e cor do contêiner
Outros utilitários, como bordas e cores, também são frequentemente usados em conjunto com contêineres:
Exemplo
Minha primeira página Bootstrap
Este contêiner tem uma borda e alguns preenchimentos e margens extras.
Minha primeira página Bootstrap
Este contêiner tem uma cor de fundo escura e um texto branco, e alguns preenchimentos e margens extras.
Minha primeira página Bootstrap
Este contêiner tem uma cor de fundo azul e um texto branco, e alguns preenchimentos e margens extras.
<div class="container p-3 my-3 border"></div>
<div class="container
p-3 my-3 bg-dark
text-white"></div>
<div class="container p-3 my-3 bg-primary
text-white"></div>
Você aprenderá muito mais sobre cores e utilitários de borda, em nosso Capítulo BS4 Colors e BS4 Utilities Chapter .
Contêineres Responsivos
Você também pode usar as .container-sm|md|lg|xlclasses para criar contêineres responsivos.
O max-widthconteúdo do contêiner mudará em diferentes tamanhos de tela/portas de visualização:
| Classe |
Extra pequeno <576px |
Pequeno ≥576px |
Médio ≥768px |
Grande ≥992px |
Extra grande ≥1200px |
|---|---|---|---|---|---|
.container-sm |
100% | 540px | 720px | 960px | 1140px |
.container-md |
100% | 100% | 720px | 960px | 1140px |
.container-lg |
100% | 100% | 100% | 960px | 1140px |
.container-xl |
100% | 100% | 100% | 100% | 1140px |
Exemplo
<div class="container-sm">.container-sm</div>
<div
class="container-md">.container-md</div>
<div
class="container-lg">.container-lg</div>
<div
class="container-xl">.container-xl</div>
Você sabia?
W3.CSS é uma excelente alternativa ao Bootstrap 4.
O W3.CSS é menor, mais rápido e mais fácil de usar.
Se você quiser aprender W3.CSS, vá para nosso Tutorial W3.CSS .