Recipientes

Como eles trabalham

Os contêineres são o elemento de layout mais básico no Bootstrap e são necessários ao usar nosso sistema de grade padrão . Os contêineres são usados ​​para conter, preencher e (às vezes) centralizar o conteúdo dentro deles. Embora os contêineres possam ser aninhados, a maioria dos layouts não exige um contêiner aninhado.

O Bootstrap vem com três contêineres diferentes:

• .container, que define a max-widthem cada ponto de interrupção responsivo
• .container-fluid, que está width: 100%em todos os pontos de interrupção
• .container-{breakpoint}, que é width: 100%até o ponto de interrupção especificado

A tabela abaixo ilustra como cada contêiner se max-widthcompara ao original .containere .container-fluidem cada ponto de interrupção.

Veja-os em ação e compare-os em nosso exemplo de Grade .

Contêiner padrão

Nossa classe padrão .containeré um contêiner responsivo de largura fixa, ou seja, suas max-widthalterações em cada ponto de interrupção.

<div class="container">
  <!-- Content here -->
</div>

Contêineres responsivos

Os contêineres responsivos permitem que você especifique uma classe com 100% de largura até que o ponto de interrupção especificado seja alcançado, após o qual aplicamos max-widths para cada um dos pontos de interrupção mais altos. Por exemplo, .container-smé 100% largo para iniciar até que o ponto de sminterrupção seja alcançado, onde será dimensionado com md, lg, xle xxl.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
<div class="container-xxl">100% wide until extra extra large breakpoint</div>

Recipientes de fluido

Use .container-fluidpara um contêiner de largura total, abrangendo toda a largura da janela de visualização.

<div class="container-fluid">
  ...
</div>

Sass

Como mostrado acima, o Bootstrap gera uma série de classes de contêiner predefinidas para ajudá-lo a criar os layouts desejados. Você pode personalizar essas classes de contêiner predefinidas modificando o mapa Sass (encontrado em _variables.scss) que as alimenta:

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

Além de personalizar o Sass, você também pode criar seus próprios containers com nosso mixin Sass.

// Source mixin
@mixin make-container($padding-x: $container-padding-x) {
  width: 100%;
  padding-right: $padding-x;
  padding-left: $padding-x;
  margin-right: auto;
  margin-left: auto;
}

// Usage
.custom-container {
  @include make-container();
}

Para obter mais informações e exemplos sobre como modificar nossos mapas e variáveis ​​Sass, consulte a seção Sass da documentação do Grid .