ꯒꯇꯔꯁꯤꯡ꯫

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

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

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

ꯒꯇꯔꯁꯤꯡ ꯑꯁꯤ ꯀꯣꯂꯝ ꯀꯟꯇꯦꯟꯇꯀꯤ ꯃꯔꯛꯇꯥ ꯂꯩꯕꯥ ꯒꯦꯄꯁꯤꯡꯅꯤ, ꯃꯁꯤ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ padding. ꯑꯩꯈꯣꯌꯅꯥ ꯁꯦꯠ ꯇꯧꯏ padding-rightꯑꯃꯁꯨꯡ padding-leftꯀꯣꯂꯝ ꯈꯨꯗꯤꯡꯃꯛꯇꯥ, ꯑꯃꯁꯨꯡ marginꯀꯟꯇꯦꯟꯇ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯅꯕꯥ ꯔꯣ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯍꯧꯔꯀꯐꯝ ꯑꯃꯁꯨꯡ ꯑꯔꯣꯏꯕꯗꯥ ꯃꯗꯨ ꯑꯣꯐꯁꯦꯠ ꯇꯧꯅꯕꯥ ꯅꯦꯒꯦꯇꯤꯕ ꯁꯤꯖꯤꯟꯅꯩ꯫
ꯒꯇꯔꯁꯤꯡ ꯑꯁꯤ 1.5rem( 24px) ꯋꯥꯏꯗꯇꯒꯤ ꯍꯧꯏ꯫ ꯃꯁꯤꯅꯥ ꯑꯩꯈꯣꯌꯒꯤ ꯒ꯭ꯔꯤꯗ ꯑꯁꯤ ꯄꯦꯗꯤꯡ ꯑꯃꯁꯨꯡ ꯃꯥꯔꯖꯤꯟ ꯁ꯭ꯄꯦꯁꯔꯁꯤꯡ ꯁ꯭ꯀꯦꯂꯒꯥ ꯃꯥꯟꯅꯕꯥ ꯉꯃꯍꯜꯂꯤ꯫
ꯒꯇꯔꯁꯤꯡ ꯑꯁꯤ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯅꯥ ꯑꯦꯗꯖꯁ꯭ꯠ ꯇꯧꯕꯥ ꯌꯥꯏ꯫ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯒꯇꯔꯁꯤꯡ, ꯚꯔꯇꯤꯀꯦꯜ ꯒꯇꯔꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯒꯇꯔ ꯄꯨꯝꯅꯃꯛ ꯃꯣꯗꯤꯐꯥꯏ ꯇꯧꯅꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ-ꯁ꯭ꯄꯦꯁꯤꯐꯤꯛ ꯒꯇꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯧ꯫

ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯒꯇꯔꯁꯤꯡ꯫

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

ꯀꯁ꯭ꯇꯝ ꯀꯂꯝ ꯄꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫

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

<div class="container px-4 text-center">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

ꯑꯇꯣꯞꯄꯥ ꯁꯣꯂꯨꯁꯟ ꯑꯃꯗꯤ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨꯒꯥ .rowꯂꯣꯌꯅꯅꯥ ꯔꯦꯄꯔ ꯑꯃꯥ ꯍꯥꯄꯆꯤꯅꯕꯅꯤ :.overflow-hidden

ꯀꯁ꯭ꯇꯝ ꯀꯂꯝ ꯄꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫

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

<div class="container overflow-hidden text-center">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

ꯚꯔꯇꯤꯀꯦꯜ ꯒꯇꯔꯁꯤꯡ꯫

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

ꯀꯁ꯭ꯇꯝ ꯀꯂꯝ ꯄꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫

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

<div class="container overflow-hidden text-center">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ & ꯚꯔꯇꯤꯀꯦꯜ ꯒꯇꯔꯁꯤꯡ꯫

.g-*ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯒꯇꯔ ꯋꯥꯏꯗꯁꯤꯡ ꯀꯟꯠꯔꯣꯜ ꯇꯧꯅꯕꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯏ, ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯈꯨꯗꯝ ꯑꯁꯤꯒꯤꯗꯃꯛꯇꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯑꯄꯤꯀꯄꯥ ꯒꯇꯔ ꯋꯥꯏꯗ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯩ, ꯃꯔꯝ ꯑꯗꯨꯅꯥ .overflow-hiddenꯔꯦꯄꯔ ꯀ꯭ꯂꯥꯁ ꯍꯥꯄꯆꯤꯅꯕꯒꯤ ꯃꯊꯧ ꯇꯥꯕꯥ ꯂꯩꯔꯣꯏ꯫

ꯀꯁ꯭ꯇꯝ ꯀꯂꯝ ꯄꯦꯗꯤꯡ ꯇꯧꯕꯥ꯫

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

<div class="container text-center">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

ꯔꯣ ꯀꯂꯃꯁꯤꯡ ꯒꯇꯔꯁꯤꯡ꯫

ꯔꯣ ꯀꯂꯃꯁꯤꯡꯗꯥ ꯒꯇꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯁꯨ ꯍꯥꯄꯆꯤꯅꯕꯥ ꯌꯥꯏ . ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯈꯨꯗꯝ ꯑꯁꯤꯗꯥ ꯑꯩꯈꯣꯌꯅꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯔꯣ ꯀꯂꯃꯁꯤꯡ ꯑꯃꯁꯨꯡ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯒꯇꯔ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯩ꯫

ꯔꯣ ꯀꯂꯝ꯫

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

<div class="container text-center">
  <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Row column</div>
    </div>
  </div>
</div>

ꯒꯇꯔꯁꯤꯡ ꯂꯩꯇꯦ꯫

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

ꯑꯦꯖ-ꯇꯨ-ꯑꯦꯖ ꯗꯤꯖꯥꯏꯟ ꯑꯃꯥ ꯃꯊꯧ ꯇꯥꯕ꯭ꯔꯥ? ꯃꯃꯥ-ꯃꯄꯥ ꯑꯗꯨ ꯊꯥꯗꯣꯀꯎ .containerꯅꯠꯠꯔꯒꯥ .container-fluidꯑꯃꯁꯨꯡ ꯑꯣꯚꯔꯐ꯭ꯂꯣ ꯊꯤꯡꯅꯕꯥ .mx-0ꯑꯗꯨꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯨ꯫.row

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

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

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

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

<div class="row g-0 text-center">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

ꯒꯇꯔꯁꯤꯡ ꯑꯗꯨ ꯍꯣꯡꯗꯣꯀꯎ꯫

ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ $guttersꯁꯥꯁ ꯃꯦꯄꯇꯒꯤ ꯏꯅꯍꯦꯔꯤ ꯇꯧꯕꯥ $spacersꯁꯥꯁ ꯃꯦꯄꯇꯒꯤ ꯁꯦꯃꯒꯠꯂꯤ꯫

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);