ꯃꯔꯨꯑꯣꯏꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯆꯠꯂꯨ꯫ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯁꯤꯡ ꯅꯦꯚꯤꯒꯦꯁꯅꯗꯥ ꯆꯠꯂꯨ꯫
in English

ꯀꯟꯇꯦꯅꯔꯁꯤꯡ ꯌꯥꯑꯣꯔꯤ꯫

ꯀꯟꯇꯦꯅꯔꯁꯤꯡ ꯑꯁꯤ ꯑꯄꯤꯕꯥ ꯗꯤꯚꯥꯏꯁ ꯅꯠꯠꯔꯒꯥ ꯚꯤꯎꯄꯣꯔꯠ ꯑꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯅꯍꯥꯛꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯌꯥꯎꯕꯥ, ꯄꯦꯗ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯥ ꯕꯨꯇꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯐꯟꯗꯥꯃꯦꯟꯇꯦꯜ ꯕꯤꯜꯗꯤꯡ ꯕ꯭ꯂꯣꯛ ꯑꯃꯅꯤ꯫

ꯃꯈꯣꯌꯅꯥ ꯃꯇꯧ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ꯫

ꯀꯟꯇꯦꯅꯔꯁꯤꯡ ꯑꯁꯤ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯇꯥ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯕꯦꯁꯤꯛ ꯑꯣꯏꯕꯥ ꯂꯦꯑꯥꯎꯠ ꯑꯦꯂꯤꯃꯦꯟꯇꯅꯤ ꯑꯃꯁꯨꯡ ꯑꯩꯈꯣꯌꯒꯤ ꯗꯤꯐꯣꯜꯇ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ ꯁꯤꯖꯤꯟꯅꯕꯗꯥ ꯃꯊꯧ ꯇꯥꯏ . ꯀꯟꯇꯦꯅꯔꯁꯤꯡ ꯑꯁꯤ ꯃꯈꯣꯌꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯊꯝꯅꯕꯥ, ꯄꯦꯗ ꯇꯧꯅꯕꯥ ꯑꯃꯁꯨꯡ (ꯀꯔꯤꯒꯨꯝꯕꯥ ꯃꯇꯃꯗꯥ) ꯁꯦꯟꯇꯔ ꯇꯧꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫ ꯀꯟꯇꯦꯅꯔꯁꯤꯡ ꯑꯁꯤ ꯅꯦꯁ꯭ꯠ ꯇꯧꯕꯥ ꯌꯥꯏ ꯑꯗꯨꯕꯨ ꯑꯌꯥꯝꯕꯥ ꯂꯦꯑꯥꯎꯇꯁꯤꯡꯗꯥ ꯅꯦꯁ꯭ꯠ ꯇꯧꯕꯥ ꯀꯟꯇꯦꯅꯔ ꯑꯃꯒꯤ ꯃꯊꯧ ꯇꯥꯗꯦ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯑꯁꯤ ꯇꯣꯉꯥꯟ ꯇꯣꯉꯥꯅꯕꯥ ꯀꯟꯇꯦꯅꯔ ꯑꯍꯨꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯥꯀꯏ:

  • .containermax-width, ꯃꯁꯤꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯑꯦ ꯁꯦꯠ ꯇꯧꯏ꯫
  • .container-fluid, ꯃꯁꯤ width: 100%ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯂꯩ꯫
  • .container-{breakpoint}, ꯃꯁꯤ width: 100%ꯑꯀꯛꯅꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯐꯥꯑꯣꯕꯥ ꯑꯣꯏꯒꯅꯤ꯫

ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯇꯦꯕꯜ ꯑꯁꯤꯅꯥ ꯀꯟꯇꯦꯅꯔ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯑꯔꯤꯕꯥ ꯑꯗꯨꯒꯥ ꯑꯃꯁꯨꯡ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯃꯔꯛꯇꯥ ꯀꯔꯝꯅꯥ max-widthꯆꯥꯡꯗꯝꯅꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯎꯠꯂꯤ꯫.container.container-fluid

ꯃꯈꯣꯌꯕꯨ ꯊꯕꯛ ꯑꯣꯏꯅꯥ ꯎꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯩꯈꯣꯌꯒꯤ ꯒ꯭ꯔꯤꯗꯀꯤ ꯈꯨꯗꯝ ꯑꯁꯤꯗꯥ ꯆꯥꯡꯗꯝꯅꯕꯥ .

ꯑꯍꯦꯅꯕꯥ ꯑꯄꯤꯀꯄꯥ
<576px
ꯑꯄꯤꯀꯄꯥ
≥576px ꯑꯣꯏꯒꯅꯤ꯫
ꯃꯤꯗꯤꯌꯝ
≥768px ꯑꯣꯏꯒꯅꯤ꯫
ꯑꯆꯧꯕꯥ
≥992px
ꯑꯦꯛꯁ-ꯂꯥꯔꯖ
≥1200px ꯑꯣꯏꯒꯅꯤ꯫
XX-ꯑꯆꯧꯕꯥ
≥1400px
.container ꯱꯰꯰% ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ ꯵꯴꯰ꯄꯤ.ꯑꯦꯛꯁ ꯷꯲꯰ꯄꯤ.ꯑꯦꯛꯁ ꯹꯶꯰ꯄꯤ.ꯑꯦꯛꯁ ꯱꯱꯴꯰ ꯄꯤ.ꯑꯦꯛꯁ ꯱꯳꯲꯰ꯄꯤ.ꯑꯦꯛꯁ
.container-sm ꯱꯰꯰% ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ ꯵꯴꯰ꯄꯤ.ꯑꯦꯛꯁ ꯷꯲꯰ꯄꯤ.ꯑꯦꯛꯁ ꯹꯶꯰ꯄꯤ.ꯑꯦꯛꯁ ꯱꯱꯴꯰ ꯄꯤ.ꯑꯦꯛꯁ ꯱꯳꯲꯰ꯄꯤ.ꯑꯦꯛꯁ
.container-md ꯱꯰꯰% ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ ꯱꯰꯰% ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ ꯷꯲꯰ꯄꯤ.ꯑꯦꯛꯁ ꯹꯶꯰ꯄꯤ.ꯑꯦꯛꯁ ꯱꯱꯴꯰ ꯄꯤ.ꯑꯦꯛꯁ ꯱꯳꯲꯰ꯄꯤ.ꯑꯦꯛꯁ
.container-lg ꯱꯰꯰% ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ ꯱꯰꯰% ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ ꯱꯰꯰% ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ ꯹꯶꯰ꯄꯤ.ꯑꯦꯛꯁ ꯱꯱꯴꯰ ꯄꯤ.ꯑꯦꯛꯁ ꯱꯳꯲꯰ꯄꯤ.ꯑꯦꯛꯁ
.container-xl ꯱꯰꯰% ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ ꯱꯰꯰% ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ ꯱꯰꯰% ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ ꯱꯰꯰% ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ ꯱꯱꯴꯰ ꯄꯤ.ꯑꯦꯛꯁ ꯱꯳꯲꯰ꯄꯤ.ꯑꯦꯛꯁ
.container-xxl ꯱꯰꯰% ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ ꯱꯰꯰% ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ ꯱꯰꯰% ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ ꯱꯰꯰% ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ ꯱꯰꯰% ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ ꯱꯳꯲꯰ꯄꯤ.ꯑꯦꯛꯁ
.container-fluid ꯱꯰꯰% ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ ꯱꯰꯰% ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ ꯱꯰꯰% ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ ꯱꯰꯰% ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ ꯱꯰꯰% ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ ꯱꯰꯰% ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫

ꯗꯤꯐꯣꯜꯇ ꯀꯟꯇꯦꯅꯔ ꯑꯃꯥ꯫

ꯑꯩꯈꯣꯌꯒꯤ ꯗꯤꯐꯣꯜꯇ .containerꯀ꯭ꯂꯥꯁ ꯑꯁꯤ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ, ꯐꯤꯛꯁ-ꯋꯥꯏꯗ ꯀꯟꯇꯦꯅꯔ ꯑꯃꯅꯤ, ꯃꯁꯤꯒꯤ ꯑꯔꯊꯗꯤ max-widthꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯃꯁꯤꯒꯤ ꯑꯍꯣꯡꯕꯁꯤꯡ ꯑꯁꯤꯅꯤ꯫

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

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯕꯥ ꯀꯟꯇꯦꯅꯔꯁꯤꯡ꯫

ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕ ꯀꯟꯇꯦꯅꯔꯁꯤꯡꯅꯥ ꯑꯗꯣꯃꯗꯥ ꯑꯀꯛꯅꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯑꯗꯨ ꯌꯧꯗ꯭ꯔꯤꯉꯩꯗꯥ ꯱꯰꯰% ꯄꯥꯀꯄꯥ ꯀ꯭ꯂꯥꯁ ꯑꯃꯥ ꯂꯦꯄꯊꯣꯀꯄꯥ ꯌꯥꯍꯜꯂꯤ, ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯑꯩꯈꯣꯌꯅꯥ max-widthꯑꯋꯥꯡꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯈꯨꯗꯤꯡꯃꯛꯀꯤꯗꯃꯛ s ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯑꯗꯨ ꯌꯧꯗ꯭ꯔꯤꯉꯩꯗꯥ .container-smꯍꯧꯅꯕꯥ ꯱꯰꯰% ꯄꯥꯀꯊꯣꯛ- ꯆꯥꯎꯊꯣꯀꯏ, ꯃꯐꯝ ꯑꯗꯨꯗꯥ ꯃꯁꯤꯅꯥ , , , ꯑꯃꯁꯨꯡ .smmdlgxlxxl

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

ꯐ꯭ꯂꯨꯏꯗ ꯀꯟꯇꯦꯅꯔꯁꯤꯡ꯫

.container-fluidꯚꯤꯎꯄꯣꯔꯇꯀꯤ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯄꯨꯝꯅꯃꯛ ꯁ꯭ꯄꯦꯟ ꯇꯧꯕꯥ, ꯃꯄꯨꯡꯐꯥꯕꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯀꯟꯇꯦꯅꯔ ꯑꯃꯒꯤꯗꯃꯛ ꯁꯤꯖꯤꯟꯅꯧ꯫

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

ꯁꯥꯁꯁ ꯇꯧꯕꯥ꯫

ꯃꯊꯛꯇꯥ ꯎꯠꯂꯤꯕꯥ ꯃꯇꯨꯡ ꯏꯟꯅꯥ, ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯅꯥ ꯑꯗꯣꯝꯅꯥ ꯄꯥꯝꯂꯤꯕꯥ ꯂꯦꯑꯥꯎꯇꯁꯤꯡ ꯁꯦꯝꯕꯗꯥ ꯃꯇꯦꯡ ꯄꯥꯡꯅꯕꯥ ꯄ꯭ꯔꯤꯗꯤꯐꯥꯏꯗ ꯀꯟꯇꯦꯅꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯁꯤꯔꯤꯖ ꯑꯃꯥ ꯁꯦꯝꯃꯤ꯫ _variables.scssꯅꯍꯥꯛꯅꯥ ꯃꯈꯣꯌꯗꯥ ꯄꯥꯋꯔ ꯄꯤꯔꯤꯕꯥ ꯁꯥꯁ ꯃꯦꯞ (ꯗꯥ ꯐꯪꯂꯤꯕꯥ ) ꯑꯗꯨ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯗꯨꯅꯥ ꯄ꯭ꯔꯤꯗꯤꯐꯥꯏꯟ ꯇꯧꯔꯕꯥ ꯀꯟꯇꯦꯅꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯥ ꯌꯥꯏ :

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

ꯁꯥꯁ ꯑꯁꯤ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯇꯥ ꯅꯠꯇꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯁꯥꯁ ꯃꯤꯛꯁꯤꯅꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯗꯣꯝꯅꯥ ꯑꯗꯣꯃꯒꯤ ꯏꯁꯥꯒꯤ ꯀꯟꯇꯦꯅꯔꯁꯤꯡꯁꯨ ꯁꯦꯝꯕꯥ ꯌꯥꯒꯅꯤ꯫

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

ꯑꯩꯈꯣꯌꯒꯤ ꯁꯥꯁ ꯃꯦꯄꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯒꯗꯒꯦ ꯍꯥꯌꯕꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯑꯍꯦꯅꯕꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯟ ꯑꯃꯁꯨꯡ ꯈꯨꯗꯃꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ, ꯆꯥꯅꯕꯤꯗꯨꯅꯥ ꯒ꯭ꯔꯤꯗ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯦꯁꯅꯒꯤ ꯁꯥꯁ ꯁꯦꯛꯁꯟ ꯑꯗꯨ ꯌꯦꯡꯕꯤꯌꯨ .