ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ꯫

ꯈꯨꯗꯝ

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

<div class="container">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

ꯃꯊꯛꯀꯤ ꯈꯨꯗꯝ ꯑꯁꯤꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯃꯃꯥꯡꯗꯥ ꯁꯦꯃꯗꯣꯀꯄꯥ ꯒ꯭ꯔꯤꯗ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯗꯤꯚꯥꯏꯁ ꯑꯃꯁꯨꯡ ꯚꯤꯎꯄꯣꯔꯠ ꯄꯨꯝꯅꯃꯛꯀꯤ ꯃꯔꯛꯇꯥ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯄꯥꯛ ꯆꯥꯎꯕꯥ ꯀꯣꯂꯝ ꯑꯍꯨꯝ ꯁꯦꯝꯃꯤ꯫ ꯍꯥꯌꯔꯤꯕꯥ ꯀꯣꯂꯃꯁꯤꯡ ꯑꯁꯤ ꯃꯃꯥ-ꯃꯄꯥꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯄꯦꯖ ꯑꯗꯨꯗꯥ ꯁꯦꯟꯇꯔ ꯇꯧꯏ .container.

ꯃꯁꯤ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ꯫

ꯃꯁꯤ ꯊꯨꯒꯥꯏꯗꯨꯅꯥ, ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯁꯤ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯄꯨꯟꯅꯥ ꯂꯥꯀꯏ:

• ꯑꯩꯈꯣꯌꯒꯤ ꯒ꯭ꯔꯤꯗ ꯑꯁꯤꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯶ ꯁꯄꯣꯔꯠ ꯇꯧꯔꯤ . ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯃꯦꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯁꯤꯡꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯅꯤ min-width, ꯃꯁꯤꯅꯥ ꯇꯥꯀꯄꯗꯤ ꯃꯈꯣꯌꯅꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯑꯗꯨꯗꯥ ꯑꯃꯁꯨꯡ ꯃꯗꯨꯒꯤ ꯃꯊꯛꯇꯥ ꯂꯩꯕꯥ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯁꯣꯀꯍꯜꯂꯤ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, .col-sm-4, sm, md, lg, xlꯑꯃꯁꯨꯡ xxl)꯫ ꯃꯁꯤꯅꯥ ꯇꯥꯀꯄꯗꯤ ꯅꯍꯥꯛꯅꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯀꯟꯇꯦꯅꯔ ꯑꯃꯁꯨꯡ ꯀꯣꯂꯃꯒꯤ ꯁꯥꯏꯖ ꯑꯃꯁꯨꯡ ꯂꯃꯆꯠ-ꯁꯥꯖꯠ ꯀꯟꯠꯔꯣꯜ ꯇꯧꯕꯥ ꯌꯥꯏ꯫

• ꯀꯟꯇꯦꯅꯔꯁꯤꯡꯅꯥ ꯁꯦꯟꯇꯔ ꯇꯧꯏ ꯑꯃꯁꯨꯡ ꯅꯍꯥꯛꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯣꯏꯅꯥ ꯄꯦꯗ ꯇꯧꯏ꯫ .containerꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯄꯤꯛꯁꯦꯜ ꯋꯥꯏꯗ .container-fluidꯑꯃꯒꯤꯗꯃꯛ , width: 100%ꯚꯤꯎꯄꯣꯔꯠ ꯑꯃꯁꯨꯡ ꯗꯤꯚꯥꯏꯁ ꯄꯨꯝꯅꯃꯛꯀꯤ ꯑꯣꯏꯅꯥ, ꯅꯠꯠꯔꯒꯥ .container-mdꯐ꯭ꯂꯨꯏꯗ ꯑꯃꯁꯨꯡ ꯄꯤꯛꯁꯦꯜ ꯋꯥꯏꯗꯁꯤꯡꯒꯤ ꯀꯝꯕꯤꯅꯦꯁꯟ ꯑꯃꯒꯤꯗꯃꯛ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯀꯟꯇꯦꯅꯔ ꯑꯃꯥ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ) ꯁꯤꯖꯤꯟꯅꯧ꯫

• ꯔꯣꯁꯤꯡ ꯑꯁꯤ ꯀꯂꯃꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯔꯦꯄꯔꯁꯤꯡꯅꯤ꯫ ꯀꯣꯂꯝ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ paddingꯃꯈꯣꯌꯒꯤ ꯃꯔꯛꯇꯥ ꯂꯩꯕꯥ ꯁ꯭ꯄꯦꯁ ꯀꯟꯠꯔꯣꯜ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ (ꯒꯇꯔ ꯍꯥꯌꯅꯥ ꯀꯧꯕꯥ) ꯂꯩ꯫ ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯃꯁꯤ paddingꯅꯍꯥꯛꯀꯤ ꯀꯣꯂꯃꯁꯤꯡꯗꯥ ꯂꯩꯔꯤꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ꯃꯐꯝ ꯑꯗꯨꯒꯤ ꯃꯈꯥꯗꯥ ꯚꯤꯖꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯥ ꯉꯝꯅꯕꯥ ꯅꯦꯒꯦꯇꯤꯕ ꯃꯥꯔꯖꯤꯅꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯔꯣꯁꯤꯡꯗꯥ ꯀꯥꯎꯟꯇꯔꯑꯦꯛꯇ ꯇꯧꯏ꯫ ꯔꯣꯁꯤꯡꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯀꯟꯇꯦꯟꯇꯀꯤ ꯁ꯭ꯄꯦꯁꯤꯡ ꯍꯣꯡꯗꯣꯛꯅꯕꯥ ꯀꯣꯂꯝ ꯁꯥꯏꯖꯤꯡ ꯑꯃꯁꯨꯡ ꯒꯇꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯃꯒꯥ ꯑꯃꯒꯥ ꯃꯥꯟꯅꯅꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯅꯕꯥ ꯃꯣꯗꯤꯐꯥꯏꯌꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯁꯨ ꯁꯄꯣꯔꯠ ꯇꯧꯏ꯫

• ꯀꯣꯂꯃꯁꯤꯡ ꯑꯁꯤ ꯊꯥꯖꯕꯥ ꯌꯥꯗꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯐ꯭ꯂꯦꯛꯁꯤꯕꯜ ꯑꯣꯏ꯫ ꯔꯣ ꯑꯃꯗꯥ ꯇꯦꯃꯞꯂꯦꯠ ꯀꯣꯂꯝ ꯱꯲ ꯂꯩ, ꯃꯁꯤꯅꯥ ꯅꯍꯥꯀꯄꯨ ꯀꯣꯂꯝ ꯃꯁꯤꯡ ꯑꯃꯍꯦꯛꯇꯗꯥ ꯌꯥꯑꯣꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯤ ꯇꯣꯉꯥꯟ ꯇꯣꯉꯥꯅꯕꯥ ꯀꯝꯕꯤꯅꯦꯁꯅꯁꯤꯡ ꯁꯦꯝꯕꯥ ꯌꯥꯍꯜꯂꯤ꯫ ꯀꯣꯂꯝ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯅꯥ ꯁ꯭ꯄꯦꯟ ꯇꯧꯒꯗꯕꯥ ꯇꯦꯃꯞꯂꯦꯠ ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯃꯁꯤꯡ ꯑꯗꯨ ꯇꯥꯀꯏ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, col-4ꯁ꯭ꯄꯦꯟ ꯃꯔꯤ)꯫ widths ꯑꯁꯤ ꯆꯥꯗꯥꯁꯤꯡꯗꯥ ꯁꯦꯠ ꯇꯧꯏ ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯔꯤꯂꯦꯇꯤꯚ ꯁꯥꯏꯖꯤꯡ ꯂꯩ꯫

• ꯒꯇꯔꯁꯤꯡ ꯑꯁꯤꯁꯨ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏ ꯑꯃꯁꯨꯡ ꯀꯁ꯭ꯇꯃꯁ ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯒꯇꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯐꯪꯏ , ꯑꯩꯈꯣꯌꯒꯤ ꯃꯥꯔꯖꯤꯟ ꯑꯃꯁꯨꯡ ꯄꯦꯗꯤꯡ ꯁ꯭ꯄꯦꯁꯤꯡꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯁꯥꯏꯖ ꯄꯨꯝꯅꯃꯛ ꯌꯥꯑꯣꯔꯤ . ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯒꯇꯔꯁꯤꯡ .gx-*, ,ꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯚꯔꯇꯤꯀꯦꯜ ꯒꯇꯔꯁꯤꯡ .gy-*, ꯅꯠꯠꯔꯒꯥ .g-*ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯒꯇꯔ ꯄꯨꯝꯅꯃꯛ ꯍꯣꯡꯗꯣꯀꯎ꯫ .g-0ꯒꯇꯔꯁꯤꯡ ꯂꯧꯊꯣꯛꯅꯕꯒꯤꯗꯃꯛꯇꯁꯨ ꯐꯪꯍꯜꯂꯤ꯫

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

ꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁꯀꯤ ꯑꯀꯣꯌꯕꯗꯥ ꯂꯩꯔꯤꯕꯥ ꯂꯤꯃꯤꯇꯦꯁꯅꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯕꯥꯒꯁꯤꯡ ꯑꯁꯤ ꯈꯉꯕꯤꯌꯨ , ꯃꯗꯨꯗꯤ HTML ꯑꯦꯂꯤꯃꯦꯟꯇ ꯈꯔꯗꯤ ꯐ꯭ꯂꯦꯛꯁ ꯀꯟꯇꯦꯅꯔ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯉꯃꯗꯕꯥ ꯑꯁꯤꯒꯨꯝꯅꯥ .

ꯒ꯭ꯔꯤꯗ ꯑꯣꯄꯁꯅꯁꯤꯡ꯫

ꯕꯨꯠꯁ꯭ꯠꯔꯥꯄꯀꯤ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ ꯑꯁꯤꯅꯥ ꯗꯤꯐꯣꯜꯇ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯶ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯑꯦꯗꯞꯇꯦꯠ ꯇꯧꯕꯥ ꯌꯥꯏ, ꯑꯃꯁꯨꯡ ꯅꯍꯥꯛꯅꯥ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯑꯃꯍꯦꯛꯇꯗꯥ ꯑꯦꯗꯞꯇꯦꯠ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯗꯤꯐꯣꯜꯇ ꯒ꯭ꯔꯤꯗ ꯇꯌꯥꯔ ꯶ ꯑꯁꯤ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤ:

• ꯑꯍꯦꯅꯕꯥ ꯑꯄꯤꯀꯄꯥ (xs) .
• ꯑꯄꯤꯀꯄꯥ (ꯑꯦꯁ.ꯑꯦꯝ.)
• ꯃꯤꯗꯤꯌꯝ (ꯑꯦꯝ.ꯗꯤ.)꯫
• ꯑꯆꯧꯕꯥ (ꯑꯦꯜ.ꯖꯤ.)꯫
• ꯑꯍꯦꯅꯕꯥ ꯑꯆꯧꯕꯥ (xl)
• ꯑꯍꯦꯅꯕꯥ ꯑꯍꯦꯅꯕꯥ ꯑꯆꯧꯕꯥ (xxl)

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

ꯑꯣꯇꯣ-ꯂꯦꯑꯥꯎꯠ ꯀꯂꯃꯁꯤꯡ꯫

.col-sm-6. _

ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ꯫

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯃꯐꯃꯁꯤꯗꯥ ꯗꯤꯚꯥꯏꯁ ꯑꯃꯁꯨꯡ ꯚꯤꯎꯄꯣꯔꯠ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯕꯥ ꯒ꯭ꯔꯤꯗ ꯂꯦꯑꯥꯎꯠ ꯑꯅꯤ ꯌꯥꯑꯣꯔꯤ xs, xxl. ꯅꯍꯥꯛꯅꯥ ꯃꯊꯧ ꯇꯥꯔꯤꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯑꯣꯏꯅꯥ ꯌꯨꯅꯤꯠ-ꯂꯦꯁ ꯀ꯭ꯂꯥꯁ ꯃꯁꯤꯡ ꯑꯃꯍꯦꯛꯇ ꯍꯥꯄꯆꯤꯜꯂꯨ ꯑꯃꯁꯨꯡ ꯀꯣꯂꯝ ꯈꯨꯗꯤꯡꯃꯛ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯑꯣꯏꯒꯅꯤ꯫

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

ꯀꯣꯂꯝ ꯑꯃꯒꯤ ꯄꯥꯛ ꯆꯥꯎꯕꯥ ꯁꯦꯠ ꯇꯧꯕꯥ꯫

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

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯣꯏꯕꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯀꯟꯇꯦꯟꯇ꯫

col-{breakpoint}-autoꯃꯈꯣꯌꯒꯤ ꯀꯟꯇꯦꯟꯇꯀꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯑꯗꯨꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯁꯥꯏꯖ ꯇꯧꯅꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

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

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

ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯄꯨꯝꯅꯃꯛ꯫

ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯑꯄꯤꯀꯄꯥ ꯗꯤꯚꯥꯏꯁꯁꯤꯡꯗꯒꯤ ꯍꯧꯔꯒꯥ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯆꯥꯎꯕꯥ ꯗꯤꯚꯥꯏꯁꯁꯤꯡ ꯐꯥꯎꯕꯥ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯒ꯭ꯔꯤꯗꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ, .colꯑꯃꯁꯨꯡ .col-*ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯑꯗꯣꯝꯅꯥ ꯑꯀꯛꯅꯕꯥ ꯁꯥꯏꯖꯒꯤ ꯀꯣꯂꯝ ꯑꯃꯥ ꯃꯊꯧ ꯇꯥꯕꯥ ꯃꯇꯃꯗꯥ ꯅꯝꯕꯔ ꯂꯩꯕꯥ ꯀ꯭ꯂꯥꯁ ꯑꯃꯥ ꯇꯥꯀꯄꯤꯌꯨ; ꯅꯠꯔꯕꯗꯤ, .col.

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
  <div class="row">
    <div class="col-8">col-8</div>
    <div class="col-4">col-4</div>
  </div>
</div>

ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯣꯏꯅꯥ ꯁ꯭ꯇꯦꯛ ꯇꯧꯕꯥ꯫

ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯁꯦꯠ ꯑꯃꯈꯛꯇꯃꯛ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ .col-sm-*, ꯅꯍꯥꯛꯅꯥ ꯕꯦꯁꯤꯛ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯝ ꯑꯃꯥ ꯁꯦꯝꯕꯥ ꯌꯥꯏ, ꯃꯗꯨ ꯁ꯭ꯇꯦꯛ ꯇꯧꯗꯨꯅꯥ ꯍꯧꯔꯀꯏ ꯑꯃꯁꯨꯡ ꯑꯄꯤꯀꯄꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ( sm) ꯑꯗꯨꯗꯥ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯣꯏꯔꯀꯏ꯫

<div class="container">
  <div class="row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
  <div class="row">
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
    <div class="col-sm">col-sm</div>
  </div>
</div>

ꯃꯤꯛꯁ ꯑꯃꯁꯨꯡ ꯃꯦꯆ ꯇꯧꯕꯥ꯫

ꯅꯍꯥꯛꯀꯤ ꯀꯣꯂꯃꯁꯤꯡ ꯑꯗꯨ ꯒ꯭ꯔꯤꯗ ꯇꯌꯥꯔ ꯈꯔꯗꯥ ꯁꯨꯞꯅꯒꯤ ꯁ꯭ꯇꯦꯛ ꯇꯧꯕꯥ ꯄꯥꯃꯕ꯭ꯔꯥ? ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡꯏꯟꯅꯥ ꯇꯌꯥꯔ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯇꯣꯉꯥꯟ-ꯇꯣꯉꯥꯅꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯀꯝꯕꯤꯅꯦꯁꯟ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯃꯁꯤ ꯄꯨꯝꯅꯃꯛ ꯑꯁꯤ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ ꯍꯥꯌꯕꯒꯤ ꯍꯦꯟꯅꯥ ꯐꯕꯥ ꯋꯥꯈꯜꯂꯣꯟ ꯑꯃꯒꯤꯗꯃꯛ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯈꯨꯗꯝ ꯑꯁꯤ ꯌꯦꯡꯕꯤꯌꯨ꯫

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

ꯔꯣ ꯀꯂꯃꯁꯤꯡ꯫

.row-cols-*ꯅꯍꯥꯛꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯃꯁꯨꯡ ꯂꯦꯑꯥꯎꯠ ꯑꯗꯨ ꯈ꯭ꯕꯥꯏꯗꯒꯤ ꯐꯕꯥ ꯃꯑꯣꯡꯗꯥ ꯔꯦꯟꯗꯔ ꯇꯧꯕꯥ ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯃꯁꯤꯡ ꯑꯗꯨ ꯊꯨꯅꯥ ꯁꯦꯠ ꯇꯧꯅꯕꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯅꯣꯔꯃꯦꯜ .col-*ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯃꯤꯑꯣꯏ ꯑꯃꯒꯤ ꯀꯣꯂꯃꯁꯤꯡꯗꯥ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ) ꯑꯦꯞꯂꯥꯏ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ .col-md-4, ꯔꯣ ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ .rowꯁꯣꯔꯇꯀꯥꯠ ꯑꯃꯥ ꯑꯣꯏꯅꯥ ꯃꯃꯥ-ꯃꯄꯥꯗꯥ ꯁꯦꯠ ꯇꯧꯏ꯫ ꯑꯗꯣꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ .row-cols-autoꯀꯂꯃꯁꯤꯡꯗꯥ ꯃꯈꯣꯌꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯄꯥꯀꯆꯥꯎꯕꯥ ꯄꯤꯕꯥ ꯌꯥꯏ꯫

ꯕꯦꯁꯤꯛ ꯒ꯭ꯔꯤꯗ ꯂꯦꯑꯥꯎꯇꯁꯤꯡ ꯊꯨꯅꯥ ꯁꯦꯝꯅꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯅꯍꯥꯛꯀꯤ ꯀꯥꯔꯗ ꯂꯦꯑꯥꯎꯇꯁꯤꯡ ꯀꯟꯠꯔꯣꯜ ꯇꯧꯅꯕꯥ ꯔꯣ ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯧ꯫

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

ꯃꯁꯤꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯥꯁ ꯃꯤꯛꯁꯤꯟ ꯑꯁꯤꯁꯨ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯒꯅꯤ, row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

ꯅꯦꯁ꯭ꯇꯤꯡ ꯇꯧꯕꯥ꯫

ꯗꯤꯐꯣꯜꯇ ꯒ꯭ꯔꯤꯗꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯅꯦꯁ꯭ꯠ ꯇꯧꯅꯕꯥ, ꯍꯧꯖꯤꯛ ꯂꯩꯔꯤꯕꯥ ꯀꯣꯂꯝ ꯑꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯅꯧꯕꯥ .rowꯑꯃꯁꯨꯡ .col-sm-*ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯁꯦꯠ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ .col-sm-*ꯅꯦꯁ꯭ꯠ ꯇꯧꯔꯕꯥ ꯔꯣꯁꯤꯡꯗꯥ 12 ꯅꯠꯠꯔꯒꯥ ꯃꯁꯤꯗꯒꯤ ꯍꯦꯅꯕꯥ ꯐꯥꯎꯕꯥ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯁꯦꯠ ꯑꯃꯥ ꯌꯥꯎꯒꯗꯕꯅꯤ (ꯃꯁꯤꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯂꯩꯔꯤꯕꯥ ꯀꯣꯂꯝ 12 ꯄꯨꯝꯅꯃꯛ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯗꯦ)꯫

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="col-sm-9">
      <div class="row">
        <div class="col-8 col-sm-6">
          Level 2: .col-8 .col-sm-6
        </div>
        <div class="col-4 col-sm-6">
          Level 2: .col-4 .col-sm-6
        </div>
      </div>
    </div>
  </div>
</div>

ꯁꯥꯁꯁ ꯇꯧꯕꯥ꯫

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

ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫

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

$grid-columns:      12;
$grid-gutter-width: 1.5rem;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

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

ꯃꯤꯛꯁꯅꯁꯤꯡ꯫

ꯃꯤꯛꯁꯅꯁꯤꯡ ꯑꯁꯤ ꯒ꯭ꯔꯤꯗ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯃꯤꯑꯣꯏ ꯑꯃꯒꯤ ꯒ꯭ꯔꯤꯗ ꯀꯣꯂꯃꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯁꯦꯃꯦꯟꯇꯤꯛ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);

ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ꯫

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

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

ꯒ꯭ꯔꯤꯗ ꯑꯗꯨ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯥ꯫

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

ꯀꯂꯝ ꯑꯃꯁꯨꯡ ꯒꯇꯔꯁꯤꯡ꯫

ꯒ꯭ꯔꯤꯗ ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯃꯁꯤꯡ ꯑꯁꯤ ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯑꯁꯤ ꯀꯣꯂꯝ ꯒꯇꯔꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯄꯥꯛ ꯆꯥꯎꯕꯥ ꯁꯦꯠ ꯇꯧꯕꯥ $grid-columnsꯃꯇꯃꯗꯥ ꯃꯤꯑꯣꯏ ꯑꯃꯃꯃꯒꯤ ꯀꯣꯂꯝ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯄꯥꯀꯆꯥꯎꯕꯥ (ꯆꯥꯗꯥ) ꯁꯦꯃꯒꯠꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫$grid-gutter-width

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;

ꯒ꯭ꯔꯤꯗ ꯇꯤꯌꯔꯁꯤꯡ꯫

ꯀꯣꯂꯃꯁꯤꯡ ꯃꯁꯥꯃꯛꯇꯒꯤ ꯃꯊꯛꯇꯥ ꯆꯪꯁꯤꯟꯗꯨꯅꯥ, ꯅꯍꯥꯛꯅꯥ ꯒ꯭ꯔꯤꯗ ꯇꯌꯥꯔꯁꯤꯡꯒꯤ ꯃꯁꯤꯡ ꯑꯗꯨꯁꯨ ꯀꯁ꯭ꯇꯃꯁ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯁꯨꯞꯅꯒꯤ ꯒ꯭ꯔꯤꯗ ꯇꯌꯥꯔ ꯃꯔꯤ ꯈꯛꯇꯃꯛ ꯄꯥꯝꯂꯕꯗꯤ, ꯅꯍꯥꯛꯅꯥ $grid-breakpointsꯑꯃꯁꯨꯡ $container-max-widthsꯑꯁꯤ ꯑꯁꯤꯒꯨꯝꯕꯥ ꯋꯥꯐꯝ ꯑꯃꯗꯥ ꯑꯄꯗꯦꯠ ꯇꯧꯒꯅꯤ:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

ꯁꯥꯁ ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ ꯅꯠꯠꯔꯒꯥ ꯃꯦꯄꯁꯤꯡꯗꯥ ꯑꯍꯣꯡꯕꯥ ꯑꯃꯠꯇꯥ ꯄꯨꯔꯀꯄꯥ ꯃꯇꯃꯗꯥ, ꯅꯍꯥꯛꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯑꯍꯣꯡꯕꯁꯤꯡ ꯑꯗꯨ ꯁꯦꯚ ꯇꯧꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯕꯥ ꯃꯊꯧ ꯇꯥꯏ꯫ ꯃꯁꯤ ꯇꯧꯕꯅꯥ ꯀꯣꯂꯃꯒꯤ ꯄꯥꯛ ꯆꯥꯎꯕꯥ, ꯑꯣꯐꯁꯦꯠꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯑꯣꯔꯗꯔ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯄ꯭ꯔꯤꯗꯤꯐꯥꯏꯗ ꯇꯧꯔꯕꯥ ꯒ꯭ꯔꯤꯗ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯑꯅꯧꯕꯥ ꯁꯦꯠ ꯑꯃꯥ ꯑꯥꯎꯠꯄꯨꯠ ꯇꯧꯒꯅꯤ꯫ ꯀꯁ꯭ꯇꯝ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯅꯕꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕ ꯚꯤꯖꯤꯕꯤꯂꯤꯇꯤ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯁꯨ ꯑꯄꯗꯦꯠ ꯇꯧꯒꯅꯤ꯫ px(ꯅꯠꯇꯦ rem, em, ꯅꯠꯠꯔꯒꯥ %) ꯗꯥ ꯒ꯭ꯔꯤꯗ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯁꯣꯌꯗꯅꯥ ꯁꯦꯠ ꯇꯧꯔꯣ꯫