Container te pawh a awm

An hnathawh dan

Containers hi Bootstrap a layout element bulpui ber a ni a , kan default grid system kan hman hunah a mamawh a ni . Container te hi an chhunga thu awmte dahkhawmna, pad, leh (a chang chuan) center-na atan hman a ni. Container te hi nest theih a nih laiin, layout tam zawkah chuan nested container a ngai lo.

Bootstrap hian container hrang hrang pathum a keng tel a:

• .containermax-width, chu chuan responsive breakpoint tinah a set a
• .container-{breakpoint}, chu chu width: 100%breakpoint tarlan thleng a ni
• .container-fluid, chu chu width: 100%breakpoint zawng zawngah a awm

A hnuaia table hian container tinte max-widthchu original nen an khaikhin dan .containerleh .container-fluidbreakpoint tin across dan a tarlang a ni.

An thiltih danah en la kan Grid entirnan tehkhin rawh .

Container hmasa ber a ni

Kan default .containerclass hi responsive, fixed-width container a ni a, max-widthbreakpoint tinah a inthlak tihna a ni.

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

Responsive container te pawh a awm bawk

Responsive container hmang hian breakpoint tarlan a thlen hma loh chuan 100% wide class i specify thei a, chu mi hnuah max-widthbreakpoint sang zawk pakhat zel atan s kan apply thei a ni. Entirnan, breakpoint a thlen .container-smthlenga tan turin 100% wide a ni a, chutah chuan , , , leh smhmangin a scale up ang .mdlgxlxxl

<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>

Fluid dahna tur a awm bawk

Full width container atan hmang la .container-fluid, viewport zau zawng zawng a huam vek ang.

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

Sass a ni

A chunga kan hmuh ang hian Bootstrap hian i duh ang layout siam turin predefined container class series a siam chhuak a. Heng predefined container class te hi an power pe tu Sass map (found in _variables.scss) chu siam danglamin i customize thei ang:

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

Sass customize bakah hian kan Sass mixin hmang hian mahni container pawh i siam thei bawk.

// 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();
}

Kan Sass map leh variable te siam danglam dan tur hriat belh leh entirnan Grid documentation a Sass section ah hian en la .