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

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

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

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

ꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁꯇꯥ ꯑꯅꯧꯕꯥ ꯅꯠꯠꯔꯒꯥ ꯈꯉꯗꯕꯥ? ꯕꯦꯀꯒ꯭ꯔꯥꯎꯟꯗ, ꯇꯔꯃꯤꯅꯣꯂꯣꯖꯤ, ꯒꯥꯏꯗꯂꯥꯏꯅꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯀꯣꯗ ꯁ꯭ꯅꯤꯄꯦꯇꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ CSS ꯇ꯭ꯔꯤꯀꯁ ꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁ ꯒꯥꯏꯗ ꯑꯁꯤ ꯄꯥꯕꯤꯌꯨ꯫

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

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

ꯃꯁꯤ ꯊꯨꯒꯥꯏꯗꯨꯅꯥ, ꯃꯁꯤ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤ:

• ꯀꯟꯇꯦꯅꯔꯁꯤꯡꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯁꯥꯏꯇꯀꯤ ꯀꯟꯇꯦꯟꯇꯁꯤꯡ ꯑꯗꯨ ꯁꯦꯟꯇꯔ ꯇꯧꯅꯕꯥ ꯑꯃꯁꯨꯡ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯣꯏꯅꯥ ꯄꯦꯗ ꯇꯧꯅꯕꯥ ꯄꯥꯝꯕꯩ ꯑꯃꯥ ꯄꯤ꯫ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯄꯤꯛꯁꯦꯜ ꯋꯥꯏꯗ ꯑꯃꯒꯤꯗꯃꯛ .containerꯅꯠꯠꯔꯒꯥ ꯚꯤꯎꯄꯣꯔꯠ ꯑꯃꯁꯨꯡ ꯗꯤꯚꯥꯏꯁ ꯁꯥꯏꯖ ꯄꯨꯝꯅꯃꯛꯀꯤ ꯑꯣꯏꯅꯥ ꯁꯤꯖꯤꯟꯅꯧ꯫.container-fluidwidth: 100%
• ꯔꯣꯁꯤꯡ ꯑꯁꯤ ꯀꯂꯃꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯔꯦꯄꯔꯁꯤꯡꯅꯤ꯫ ꯀꯣꯂꯝ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ paddingꯃꯈꯣꯌꯒꯤ ꯃꯔꯛꯇꯥ ꯂꯩꯕꯥ ꯁ꯭ꯄꯦꯁ ꯀꯟꯠꯔꯣꯜ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ (ꯒꯇꯔ ꯍꯥꯌꯅꯥ ꯀꯧꯕꯥ) ꯂꯩ꯫ ꯃꯗꯨꯒꯤ ꯃꯇꯨꯡꯗꯥ ꯃꯁꯤ paddingꯅꯦꯒꯦꯇꯤꯕ ꯃꯥꯔꯖꯤꯟ ꯂꯩꯕꯥ ꯔꯣꯁꯤꯡꯗꯥ ꯀꯥꯎꯟꯇꯔꯑꯦꯛꯇ ꯇꯧꯏ꯫ ꯃꯁꯤꯒꯤ ꯃꯑꯣꯡ ꯑꯁꯤꯅꯥ, ꯅꯍꯥꯛꯀꯤ ꯀꯣꯂꯃꯁꯤꯡꯗꯥ ꯂꯩꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯄꯨꯝꯅꯃꯛ ꯑꯗꯨ ꯚꯤꯖꯨꯑꯦꯜ ꯑꯣꯏꯅꯥ ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ꯃꯐꯝ ꯑꯗꯨꯗꯥ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯏ꯫
• ꯒ꯭ꯔꯤꯗ ꯂꯦꯑꯥꯎꯠ ꯑꯃꯗꯥ, ꯀꯟꯇꯦꯟꯇ ꯑꯁꯤ ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯊꯃꯒꯗꯕꯅꯤ ꯑꯃꯁꯨꯡ ꯀꯣꯂꯝ ꯈꯛꯇꯃꯛ ꯔꯣꯁꯤꯡꯒꯤ ꯈꯨꯗꯛꯀꯤ ꯑꯣꯏꯕꯥ ꯃꯆꯥꯁꯤꯡ ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫
• ꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ, ꯑꯀꯛꯅꯕꯥ ꯑꯃꯥ ꯌꯥꯑꯣꯗꯕꯥ ꯒ꯭ꯔꯤꯗ ꯀꯂꯃꯁꯤꯡꯅꯥ widthꯃꯁꯥ ꯃꯊꯟꯇꯥ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯄꯥꯛ ꯆꯥꯎꯕꯥ ꯀꯣꯂꯃꯁꯤꯡ ꯑꯣꯏꯅꯥ ꯂꯦꯑꯥꯎꯠ ꯇꯧꯒꯅꯤ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯏꯟꯁꯇꯦꯟꯁ ꯃꯔꯤꯅꯥ .col-smꯑꯃꯃꯃꯗꯥ ꯑꯄꯤꯀꯄꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯑꯃꯁꯨꯡ ꯃꯊꯛꯇꯥ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯲꯵% ꯄꯥꯀꯄꯥ ꯑꯣꯏꯒꯅꯤ꯫ ꯑꯍꯦꯅꯕꯥ ꯈꯨꯗꯃꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯑꯣꯇꯣ-ꯂꯦꯑꯥꯎꯠ ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯁꯦꯛꯁꯟ ꯑꯗꯨ ꯌꯦꯡꯕꯤꯌꯨ꯫
• ꯀꯣꯂꯝ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯅꯥ ꯔꯣ ꯑꯃꯗꯥ ꯑꯣꯏꯊꯣꯀꯄꯥ ꯌꯥꯕꯥ ꯱꯲ꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯅꯍꯥꯛꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯄꯥꯝꯂꯤꯕꯥ ꯀꯣꯂꯝ ꯃꯁꯤꯡ ꯑꯗꯨ ꯇꯥꯀꯏ꯫ ꯑꯗꯨꯅꯥ, ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯀꯣꯂꯝ ꯑꯍꯨꯃꯒꯤ ꯃꯔꯛꯇꯥ ꯂꯩꯕꯥ ꯄꯥꯝꯂꯕꯗꯤ, ꯅꯍꯥꯛꯅꯥ .col-4.
• ꯀꯣꯂꯝ widths ꯑꯁꯤ ꯆꯥꯗꯥ ꯑꯣꯏꯅꯥ ꯁꯦꯠ ꯇꯧꯏ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯃꯈꯣꯌ ꯑꯁꯤ ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯃꯈꯣꯌꯒꯤ ꯃꯃꯥ-ꯃꯄꯥꯒꯤ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨꯒꯥ ꯆꯥꯡꯗꯝꯅꯕꯗꯥ ꯐ꯭ꯂꯨꯏꯗ ꯑꯃꯁꯨꯡ ꯁꯥꯏꯖ ꯑꯣꯏ꯫
• ꯀꯣꯂꯃꯁꯤꯡꯗꯥ ꯃꯤꯑꯣꯏ ꯑꯃꯃꯃꯒꯤ ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯒꯇꯔꯁꯤꯡ ꯁꯦꯝꯅꯕꯥ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯂꯩ padding, ꯑꯗꯨꯝ ꯑꯣꯏꯅꯃꯛ, ꯅꯍꯥꯛꯅꯥ marginꯔꯣꯁꯤꯡꯗꯒꯤ ꯑꯃꯁꯨꯡ paddingꯀꯣꯂꯃꯁꯤꯡꯗꯒꯤ .no-guttersꯑꯣꯟ .row.
• ꯒ꯭ꯔꯤꯗ ꯑꯁꯤ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯍꯟꯅꯕꯥ, ꯒ꯭ꯔꯤꯗ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯃꯉꯥ ꯂꯩ, ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯑꯣꯏꯅꯥ ꯑꯃꯥ : ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯄꯨꯝꯅꯃꯛ (ꯑꯍꯦꯅꯕꯥ ꯑꯄꯤꯀꯄꯥ), ꯑꯄꯤꯀꯄꯥ, ꯃꯌꯥꯏ ꯑꯣꯏꯕꯥ, ꯑꯆꯧꯕꯥ, ꯑꯃꯁꯨꯡ ꯑꯍꯦꯅꯕꯥ ꯑꯆꯧꯕꯥ꯫
• ꯒ꯭ꯔꯤꯗ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡ ꯑꯁꯤ ꯃꯤꯅꯤꯃꯝ ꯋꯥꯏꯗ ꯃꯦꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯁꯤꯡꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯕꯅꯤ, ꯃꯁꯤꯅꯥ ꯇꯥꯀꯄꯗꯤ ꯃꯈꯣꯌ ꯑꯁꯤ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯑꯃꯗꯥ ꯑꯃꯁꯨꯡ ꯃꯗꯨꯒꯤ ꯃꯊꯛꯇꯥ ꯂꯩꯕꯥ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, .col-sm-4ꯑꯄꯤꯀꯄꯥ, ꯃꯌꯥꯏ ꯑꯣꯏꯕꯥ, ꯑꯆꯧꯕꯥ, ꯑꯃꯁꯨꯡ ꯑꯍꯦꯅꯕꯥ ꯑꯆꯧꯕꯥ ꯗꯤꯚꯥꯏꯁꯁꯤꯡꯗꯥ ꯆꯠꯅꯩ, ꯑꯗꯨꯕꯨ ꯑꯍꯥꯅꯕꯥ xsꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯑꯗꯨꯗꯥꯗꯤ ꯆꯠꯅꯗꯦ)꯫
• ꯍꯦꯟꯅꯥ ꯁꯦꯃꯦꯟꯇꯤꯛ ꯃꯥꯔꯀꯑꯥꯄꯀꯤꯗꯃꯛꯇꯥ ꯅꯍꯥꯛꯅꯥ ꯄ꯭ꯔꯤꯗꯤꯐꯥꯏꯗ ꯇꯧꯔꯕꯥ ꯒ꯭ꯔꯤꯗ ꯀ꯭ꯂꯥꯁꯁꯤꯡ (ꯒꯨꯝꯕꯥ .col-4) ꯅꯠꯠꯔꯒꯥ ꯁꯥꯁ ꯃꯤꯛꯁꯤꯅꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ꯫

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

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

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

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

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

.col-sm-6. _

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

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

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

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

<div class="container">
  <div class="row">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="w-100"></div>
    <div class="col">Column</div>
    <div class="col">Column</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>

ꯆꯞ ꯃꯥꯟꯅꯕꯥ ꯄꯥꯀꯆꯥꯎꯕꯥ ꯃꯜꯇꯤ-ꯔꯣ꯫

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

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

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

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

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

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

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

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

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

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

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

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

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .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 class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯦꯂꯥꯏꯟꯃꯦꯟꯇ ꯇꯧꯕꯥ꯫

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

ꯒꯇꯔꯁꯤꯡ ꯂꯩꯇꯦ꯫

ꯑꯩꯈꯣꯌꯒꯤ ꯃꯃꯥꯡꯗꯥ ꯂꯦꯄꯊꯣꯛꯂꯕꯥ ꯒ꯭ꯔꯤꯗ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯗꯥ ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯂꯩꯕꯥ ꯒꯇꯔꯁꯤꯡ ꯑꯁꯤ .no-gutters. ꯃꯁꯤꯅꯥ ꯈꯨꯗꯛꯀꯤ ꯑꯣꯏꯕꯥ ꯑꯉꯥꯡꯁꯤꯡꯒꯤ ꯀꯣꯂꯝ ꯄꯨꯝꯅꯃꯛꯇꯒꯤ ꯅꯦꯒꯦꯇꯤꯕ margins .rowꯑꯃꯁꯨꯡ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯗꯨ ꯂꯧꯊꯣꯀꯏ꯫padding

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

ꯑꯦꯖ-ꯇꯨ-ꯑꯦꯖ ꯗꯤꯖꯥꯏꯟ ꯑꯃꯥ ꯃꯊꯧ ꯇꯥꯕ꯭ꯔꯥ? ꯃꯃꯥ-ꯃꯄꯥ .containerꯅꯠꯠꯔꯒꯥ .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

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

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

ꯀꯣꯂꯝ ꯔꯦꯄꯤꯡ ꯇꯧꯕꯥ꯫

ꯀꯔꯤꯒꯨꯝꯕꯥ ꯀꯣꯂꯝ ꯱꯲ꯗꯒꯤ ꯍꯦꯟꯅꯥ ꯔꯣ ꯑꯃꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯊꯝꯂꯕꯗꯤ, ꯑꯍꯦꯅꯕꯥ ꯀꯣꯂꯃꯒꯤ ꯀꯥꯡꯂꯨꯞ ꯈꯨꯗꯤꯡꯃꯛꯅꯥ, ꯌꯨꯅꯤꯠ ꯑꯃꯒꯨꯝꯅꯥ, ꯑꯅꯧꯕꯥ ꯂꯥꯏꯟ ꯑꯃꯗꯥ ꯂꯣꯠꯁꯤꯅꯒꯅꯤ꯫

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

ꯀꯣꯂꯝ ꯕ꯭ꯔꯦꯛ ꯇꯧꯏ꯫

ꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁꯇꯥ ꯑꯅꯧꯕꯥ ꯂꯥꯏꯟ ꯑꯃꯗꯥ ꯀꯂꯃꯁꯤꯡ ꯕ꯭ꯔꯦꯛ ꯇꯧꯕꯗꯥ ꯑꯄꯤꯀꯄꯥ ꯍꯦꯛ ꯑꯃꯥ ꯃꯊꯧ ꯇꯥꯏ: width: 100%ꯅꯍꯥꯛꯅꯥ ꯅꯍꯥꯛꯀꯤ ꯀꯣꯂꯃꯁꯤꯡ ꯑꯗꯨ ꯑꯅꯧꯕꯥ ꯂꯥꯏꯟ ꯑꯃꯗꯥ ꯔꯦꯞ ꯇꯧꯕꯥ ꯄꯥꯝꯂꯤꯕꯥ ꯃꯐꯝ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫ ꯅꯣꯔꯃꯦꯜ ꯑꯣꯏꯅꯥ ꯃꯁꯤ ꯃꯜꯇꯤꯄꯜ .rowsꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯄꯥꯡꯊꯣꯀꯏ, ꯑꯗꯨꯕꯨ ꯏꯃꯞꯂꯤꯃꯦꯟꯇꯦꯁꯟ ꯃꯦꯊꯗ ꯈꯨꯗꯤꯡꯃꯛꯅꯥ ꯃꯁꯤꯒꯤ ꯑꯦꯀꯥꯎꯟꯇ ꯇꯧꯕꯥ ꯉꯃꯗꯦ꯫

<div class="row">
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

  <!-- Force next columns to break to new line -->
  <div class="w-100"></div>

  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>

ꯑꯗꯣꯝꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯗꯤꯁꯞꯂꯦ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯀꯛꯅꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡꯗꯥ ꯕ꯭ꯔꯦꯛ ꯑꯁꯤ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯕꯁꯨ ꯌꯥꯏ .

<div class="row">
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

  <!-- Force next columns to break to new line at md breakpoint and up -->
  <div class="w-100 d-none d-md-block"></div>

  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>

ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯑꯣꯔꯗꯔ ꯇꯧꯕꯥ꯫

ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯣꯔꯗꯔ ꯇꯧꯕꯥ꯫

ꯅꯍꯥꯛꯀꯤ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯒꯤ ꯚꯤꯖꯨꯑꯦꯜ ꯑꯣꯔꯗꯔ.order- ꯀꯟꯠꯔꯣꯜ ꯇꯧꯅꯕꯒꯤꯗꯃꯛ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯅꯍꯥꯛꯅꯥ ꯕꯥꯏ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ) ꯁꯦꯠ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯒ꯭ꯔꯤꯗ ꯇꯌꯥꯔ ꯃꯉꯥ ꯄꯨꯝꯅꯃꯛꯀꯤ ꯃꯔꯛꯇꯥ ꯊ꯭ꯔꯨꯒꯤꯗꯃꯛ ꯁꯄꯣꯔꯠ ꯌꯥꯑꯣꯔꯤ꯫order.order-1.order-md-2112

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

ꯃꯊꯪꯁꯤꯠꯅꯥ ꯑꯃꯁꯨꯡ ( ) ꯑꯦꯞꯂꯥꯏ ꯇꯧꯗꯨꯅꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯒꯤ ꯍꯣꯡꯗꯣꯀꯄꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ .order-firstꯑꯃꯁꯨꯡ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯁꯨ ꯂꯩ꯫ ꯍꯥꯌꯔꯤꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯅꯝꯕꯔ ꯄꯤꯔꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯥ ꯏꯟꯇꯔꯃꯤꯛꯁ ꯇꯧꯕꯁꯨ ꯌꯥꯏ꯫.order-lastorderorder: -1order: 13order: $columns + 1.order-*

<div class="container">
  <div class="row">
    <div class="col order-last">
      First, but last
    </div>
    <div class="col">
      Second, but unordered
    </div>
    <div class="col order-first">
      Third, but first
    </div>
  </div>
</div>

ꯑꯣꯐꯁꯦꯇꯤꯡ ꯀꯂꯃꯁꯤꯡ꯫

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

ꯑꯣꯐꯁꯦꯠ ꯀ꯭ꯂꯥꯁꯁꯤꯡ꯫

.offset-md-*ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯀꯣꯂꯃꯁꯤꯡ ꯑꯗꯨ ꯑꯔꯣꯏꯕꯗꯥ ꯂꯧꯊꯣꯀꯎ꯫ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤꯅꯥ ꯀꯣꯂꯝ ꯑꯃꯒꯤ ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ꯃꯥꯔꯖꯤꯟ ꯑꯗꯨ ꯀꯣꯂꯝ ꯑꯃꯗꯥ *ꯍꯦꯅꯒꯠꯍꯜꯂꯤ꯫ ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯀꯣꯂꯝ ꯃꯔꯤꯒꯤ ꯃꯊꯛꯇꯥ .offset-md-4ꯆꯠꯂꯤ꯫.col-md-4

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
  <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>

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

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>

ꯃꯥꯔꯖꯤꯟ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ꯫

v4ꯗꯥ ꯐ꯭ꯂꯦꯛꯁꯕꯣꯛꯁꯇꯥ ꯆꯪꯁꯤꯜꯂꯀꯄꯒꯥ ꯂꯣꯌꯅꯅꯥ, ꯅꯍꯥꯛꯅꯥ .mr-autoꯃꯔꯨꯞ-ꯃꯄꯥꯡꯁꯤꯡꯒꯤ ꯀꯂꯃꯁꯤꯡꯕꯨ ꯑꯃꯒꯥ ꯑꯃꯒꯥ ꯂꯥꯞꯅꯥ ꯊꯝꯕꯒꯨꯝꯕꯥ ꯃꯥꯔꯖꯤꯟ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯒꯅꯤ꯫

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
  <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
  <div class="col-auto mr-auto">.col-auto .mr-auto</div>
  <div class="col-auto">.col-auto</div>
</div>

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

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

<div class="row">
  <div class="col-sm-9">
    Level 1: .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>

ꯁꯥꯁ ꯃꯤꯛꯁꯤꯅꯁꯤꯡ꯫

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

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

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

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

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

ꯃꯤꯛꯁꯅꯁꯤꯡ꯫

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

// 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();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

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

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

.example-container {
  width: 800px;
  @include make-container();
}

.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: 30px !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, ꯅꯠꯠꯔꯒꯥ %) ꯗꯥ ꯒ꯭ꯔꯤꯗ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯁꯣꯌꯗꯅꯥ ꯁꯦꯠ ꯇꯧꯔꯣ꯫