ꯒꯇꯔꯁꯤꯡ꯫
ꯒꯇꯔꯁꯤꯡ ꯑꯁꯤ ꯅꯍꯥꯛꯀꯤ ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯂꯩꯕꯥ ꯄꯦꯗꯤꯡꯅꯤ, ꯃꯁꯤꯅꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯃꯗꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯅꯥ ꯁ꯭ꯄꯦꯁ ꯑꯃꯁꯨꯡ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯗꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫
ꯃꯈꯣꯌꯅꯥ ꯃꯇꯧ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ꯫
-
ꯒꯇꯔꯁꯤꯡ ꯑꯁꯤ ꯀꯣꯂꯝ ꯀꯟꯇꯦꯟꯇꯀꯤ ꯃꯔꯛꯇꯥ ꯂꯩꯕꯥ ꯒꯦꯄꯁꯤꯡꯅꯤ, ꯃꯁꯤ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ
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 margin
s 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).
<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,
);