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

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

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

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

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

ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯇꯦꯕꯜ ꯑꯁꯤꯅꯥ ꯀꯟꯇꯦꯅꯔ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯑꯔꯤꯕꯥ ꯑꯗꯨꯒꯥ ꯑꯃꯁꯨꯡ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯃꯔꯛꯇꯥ ꯀꯔꯝꯅꯥ max-widthꯆꯥꯡꯗꯝꯅꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯎꯠꯂꯤ꯫.container.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();
}

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