Bootstrap 3: Entendendo os Containers

Bootstrap TutorialNo Bootstrap, existe o conceito de 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

Ao criar páginas com o Bootstrap, você precisa entender como usar o container, que é um dos principais componentes do framework.

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

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 a seguir 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.

Deixe um comentário

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

Acima ↑