Bootstrap: Entendendo os Containers

No Bootstrap, existe um componente chamado container, que é muito importante para a criação de páginas responsivas e de layouts.

Neste tutorial você vai conhecer e entender para que serve a classe .container do Bootstrap.

Ao final, você terá entendido essa classe e poderá usá-la com o Grid System, e com os outros componentes.


O que é o Container

O container é um componente do Bootstrap que garante que o seu layout vai ficar alinhado corretamente na página. Ele pode definir as margens laterais da página, ou deixar sem margens e, também, posiciona o conteúdo no centro do browser.

O container é invisível. Mas, você pode saber que ele existe pelos limites que ele coloca na página.

Para criar layouts com o Bootstrap, você precisa entender como usar o container, que é um dos componentes base do framework.

Bootstrap Exemplo de Container

Dependendo do tamanho da tela em que o seu site estiver sendo exibido, o container vai definir automaticamente as larguras (width) do seu layout.


Como Usar o Container

O container também pode ser qualquer uma das tags semânticas do HTML5, como <nav>, <header>, <section>, <aside>, <footer>, etc.

Ele pode ser usado para envolver todo o conteúdo da página e, também, para uma seção, ou parte, da página. É o container que mantém o layout funcionando corretamente.

Você pode ter mais de um container em uma mesma página.

O código abaixo mostra um exemplo de container implementado em uma página com Bootstrap:

Essa é a marcação que gerou a imagem anterior. Perceba que o container adicionou margens laterais ao conteúdo, e centralizou na tela. Além disso, ele já definiu a largura máxima do conteúdo.

Você pode escolher entre dois tipos de containers para usar em suas páginas: o container simples e o container fluído.

O container simples, que é o padrão, cria uma área responsiva e de largura fixa, que fica centralizada na tela (ou no elemento-pai). No código abaixo, temos um exemplo do container simples:

bootstrap-container

Já o container fluído também cria uma área responsiva, mas que ocupa toda a tela (também conhecido como full width).

bootstrap-container-fluidQual que você deve escolher? Bom, isso vai depender de como seu layout deve se comportar.

Se o layout tiver que ter uma largura fixa, use o primeiro. Se for largura variável, use o segundo.

Há, também, situações em que você precisará usar vários containers, onde um vai ficar abaixo do outro. Ou dentro de outros componentes.

Sendo assim, no Bootstrap, todos os elementos visuais da página devem estar dentro de, pelo menos, um container.

É o container que mantém o layout funcionando corretamente.


Próximos Passos…

A partir daqui você deve sempre usar o container nas suas páginas com Bootstrap, e junto com o Grid System.

Orgulhosamente feito com WordPress | Tema: Baskerville 2 por Anders Noren

Acima ↑