ꯒꯇꯔꯁꯤꯡ꯫

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

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

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

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

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

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

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

<div class="container px-4">
  <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

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

<div class="container overflow-hidden">
  <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

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

<div class="container overflow-hidden">
  <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ꯔꯦꯄꯔ ꯀ꯭ꯂꯥꯁ ꯍꯥꯄꯆꯤꯅꯕꯒꯤ ꯃꯊꯧ ꯇꯥꯕꯥ ꯂꯩꯔꯣꯏ꯫

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

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

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

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

ꯔꯣ ꯀꯂꯝ꯫

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

ꯒꯇꯔꯁꯤꯡ ꯂꯩꯇꯦ꯫

The gutters between columns in our predefined grid classes can be removed with .g-0. This removes the negative margins from .row and the horizontal padding from all immediate children columns.

Need an edge-to-edge design? Drop the parent .container or .container-fluid.

In practice, here’s how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).

.col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row g-0">
  <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>

Change the gutters

Classes are built from the $gutters Sass map which is inherited from the $spacers Sass map.

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