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

ꯈꯨꯗꯝ

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

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

<div class="container">
  <div class="row row-cols-2 row-cols-lg-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">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);
  }
}

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

To nest your content with the default grid, add a new .row and set of .col-sm-* columns within an existing .col-sm-* column. Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns).

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

Sass

When using Bootstrap’s source Sass files, you have the option of using Sass variables and mixins to create custom, semantic, and responsive page layouts. Our predefined grid classes use these same variables and mixins to provide a whole suite of ready-to-use classes for fast responsive layouts.

Variables

Variables and maps determine the number of columns, the gutter width, and the media query point at which to begin floating columns. We use these to generate the predefined grid classes documented above, as well as for the custom mixins listed below.

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

Mixins

Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.

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

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

Example usage

You can modify the variables to your own custom values, or just use the mixins with their default values. Here’s an example of using the default settings to create a two-column layout with a gap between.

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

Customizing the grid

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-columns: 12 !default;
$grid-gutter-width: 1.5rem !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 %).