Contenituri

Cumu travaglianu

I cuntenituri sò l'elementu di layout più basicu in Bootstrap è sò richiesti quandu si usa u nostru sistema di griglia predeterminatu . I cuntenituri sò usati per cuntene, pad, è (a volte) centru u cuntenutu in elli. Mentre chì i cuntenituri ponu esse nidificati, a maiò parte di i layout ùn anu micca bisognu di un containeru nidificatu.

Bootstrap vene cun trè cuntenituri diffirenti:

• .container, chì stabilisce un max-widthin ogni puntu di rupture responsive
• .container-fluid, chì hè width: 100%in tutti i punti di rottura
• .container-{breakpoint}, chì hè width: 100%finu à u puntu di ruptura specificatu

A tavula quì sottu illustra cumu ogni cuntainer si max-widthcompara à l'uriginale .containerè .container-fluidin ogni puntu di ruptura.

Vede li in azzione è paragunate in u nostru esempiu Grid .

Container par défaut

A nostra .containerclassa predeterminata hè un cuntainer responsive, di larghezza fissa, chì significheghja i so max-widthcambiamenti à ogni breakpoint.

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

Contenituri rispunsevuli

I cuntenituri rispunsevuli permettenu di specificà una classa chì hè larga 100% finu à chì u puntu di rupture specificatu hè righjuntu, dopu chì applichemu max-widths per ognunu di i punti di rottura più altu. Per esempiu, .container-smhè 100% largu per inizià finu à chì u puntu di smruptura hè ghjuntu, induve si scala cù md, lg, xl, è 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>

Contenitori di fluidi

Aduprà .container-fluidper un cuntainer di larghezza tutale, spanning the whole wide of the viewport.

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

Sass

Cum'è mostratu sopra, Bootstrap genera una seria di classi di cuntainer predefinite per aiutà à custruisce i layout chì vulete. Pudete persunalizà queste classi di cuntainer predefinite mudificà a mappa Sass (truvata in _variables.scss) chì li alimenta:

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

In più di persunalizà u Sass, pudete ancu creà i vostri cuntenituri cun u nostru 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();
}

Per più infurmazione è esempii nantu à cumu mudificà e nostre carte è variabili Sass, fate riferimentu à a sezione Sass di a documentazione di Grid .