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

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

ꯄꯦꯖ ꯑꯁꯤꯗꯥ ꯌꯥꯑꯣꯔꯤ꯫

ꯈꯨꯗꯝ

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

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

ꯌꯨꯝꯕꯤ

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<div class="container text-center">
  <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)

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

	xs <꯵꯷꯶px ꯍꯥꯌꯅꯥ ꯈꯉꯅꯩ꯫	sm ≥576px ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫	md ≥768px ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫	lg ≥992px ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫	xl ≥1200px ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫	xxl ≥1400px ꯑꯣꯏꯕꯥ ꯌꯥꯏ꯫
ꯀꯟꯇꯦꯅꯔ ꯑꯃꯥ꯫`max-width`	ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ (ꯑꯇꯣꯞꯄꯥ)	꯵꯴꯰ꯄꯤ.ꯑꯦꯛꯁ	꯷꯲꯰ꯄꯤ.ꯑꯦꯛꯁ	꯹꯶꯰ꯄꯤ.ꯑꯦꯛꯁ	꯱꯱꯴꯰ ꯄꯤ.ꯑꯦꯛꯁ	꯱꯳꯲꯰ꯄꯤ.ꯑꯦꯛꯁ
ꯀ꯭ꯂꯥꯁꯀꯤ ꯄ꯭ꯔꯤꯐꯦꯀꯆꯔ꯫	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
# ꯀꯂꯃꯁꯤꯡꯒꯤ꯫	꯱꯲ ꯑꯃꯁꯨꯡ ꯑꯦꯟ
ꯒꯇꯔꯒꯤ ꯄꯥꯀꯆꯥꯎꯕꯥ꯫	꯱.꯵ꯔꯦꯝ (ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ꯑꯃꯁꯨꯡ ꯑꯔꯣꯏꯕꯗꯥ .꯷꯵ꯔꯦꯝ)
ꯀꯁ꯭ꯇꯝ ꯒꯇꯔꯁꯤꯡ꯫	ꯍꯣꯏ
ꯅꯦꯁ꯭ꯇꯦꯕꯜ ꯑꯣꯏꯕꯥ꯫	ꯍꯣꯏ
ꯀꯣꯂꯝ ꯑꯣꯔꯗꯔ ꯇꯧꯕꯥ꯫	ꯍꯣꯏ

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

.col-sm-6. _

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

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

꯲ꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯱

꯲ꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯲

꯳ꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯱

꯲ꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯳

꯳ꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯳

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<div class="container text-center">
  <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>

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

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

꯳ꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯱

꯳ꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯲ (ꯄꯥꯀꯄꯥ)

꯳ꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯳

꯳ꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯱

꯳ꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯲ (ꯄꯥꯀꯄꯥ)

꯳ꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯳

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<div class="container text-center">
  <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ꯃꯈꯣꯌꯒꯤ ꯀꯟꯇꯦꯟꯇꯀꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯄꯥꯛ-ꯆꯥꯎꯕꯥ ꯑꯗꯨꯗꯥ ꯌꯨꯝꯐꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯁꯥꯏꯖ ꯇꯧꯅꯕꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫

꯳ꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯱

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

꯳ꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯳

꯳ꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯱

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

꯳ꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯳

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<div class="container text-center">
  <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.

ꯀꯣꯜ

ꯀꯣꯜ-꯸ ꯑꯁꯤꯅꯤ꯫

ꯀꯣꯜ-꯴

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<div class="container text-center">
  <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) ꯑꯗꯨꯗꯥ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯣꯏꯔꯀꯏ꯫

ꯀꯣꯜ-ꯑꯦꯁ.ꯑꯦꯝ.-꯸

ꯀꯣꯜ-ꯑꯦꯁ.ꯑꯦꯝ.-꯴

ꯀꯣꯜ-ꯑꯦꯁ.ꯑꯦꯝ

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<div class="container text-center">
  <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>

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

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

.ꯀꯣꯜ-ꯑꯦꯝ.ꯗꯤ.-꯸

.ꯀꯣꯜ-꯶ .ꯀꯣꯜ-ꯑꯦꯝ.ꯗꯤ.-꯴

.ꯀꯣꯜ-꯶

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<div class="container text-center">
  <!-- 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ꯀꯂꯃꯁꯤꯡꯗꯥ ꯃꯈꯣꯌꯒꯤ ꯃꯍꯧꯁꯥꯒꯤ ꯑꯣꯏꯕꯥ ꯄꯥꯀꯆꯥꯎꯕꯥ ꯄꯤꯕꯥ ꯌꯥꯏ꯫

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

ꯌꯨꯝꯕꯤ

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<div class="container text-center">
  <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>

ꯌꯨꯝꯕꯤ

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<div class="container text-center">
  <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>

ꯌꯨꯝꯕꯤ

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<div class="container text-center">
  <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>

ꯌꯨꯝꯕꯤ

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<div class="container text-center">
  <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>

ꯌꯨꯝꯕꯤ

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<div class="container text-center">
  <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>

ꯌꯨꯝꯕꯤ

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<div class="container text-center">
  <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 ꯄꯨꯝꯅꯃꯛ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯃꯊꯧ ꯇꯥꯗꯦ)꯫

ꯂꯦꯚꯦꯜ ꯱: .ꯀꯣꯜ-ꯑꯦꯁ.ꯑꯦꯝ.-꯳

ꯊꯥꯛ ꯲: .ꯀꯣꯜ-꯸ .ꯀꯣꯜ-ꯑꯦꯁ.ꯑꯦꯝ.-꯶

ꯊꯥꯛ ꯲: .ꯀꯣꯜ-꯴ .ꯀꯣꯜ-ꯑꯦꯁ.ꯑꯦꯝ.-꯶

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

<div class="container text-center">
  <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-row-columns:  6;

$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);
  }
}

ꯃꯔꯨꯑꯣꯏꯕꯥ ꯀꯟꯇꯦꯟꯇ꯫

ꯁꯦꯀꯦꯟꯗꯔꯤ ꯀꯟꯇꯦꯟꯇ꯫

html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫

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

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

Using our built-in grid Sass variables and maps, it’s possible to completely customize the predefined grid classes. Change the number of tiers, the media query dimensions, and the container widths—then recompile.

Columns and gutters

The number of grid columns can be modified via Sass variables. $grid-columns is used to generate the widths (in percent) of each individual column while $grid-gutter-width sets the width for the column gutters. $grid-row-columns is used to set the maximum number of columns of .row-cols-*, any number over this limit is ignored.

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

Grid tiers

Moving beyond the columns themselves, you may also customize the number of grid tiers. If you wanted just four grid tiers, you’d update the $grid-breakpoints and $container-max-widths to something like this:

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

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

When making any changes to the Sass variables or maps, you’ll need to save your changes and recompile. Doing so will output a brand-new set of predefined grid classes for column widths, offsets, and ordering. Responsive visibility utilities will also be updated to use the custom breakpoints. Make sure to set grid values in px (not rem, em, or %).