ꯒꯇꯔꯁꯤꯡ꯫
ꯒꯇꯔꯁꯤꯡ ꯑꯁꯤ ꯅꯍꯥꯛꯀꯤ ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯂꯩꯕꯥ ꯄꯦꯗꯤꯡꯅꯤ, ꯃꯁꯤꯅꯥ ꯕꯨꯠꯁ꯭ꯠꯔꯥꯞ ꯒ꯭ꯔꯤꯗ ꯁꯤꯁ꯭ꯇꯦꯃꯗꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯑꯣꯏꯅꯥ ꯁ꯭ꯄꯦꯁ ꯑꯃꯁꯨꯡ ꯑꯦꯂꯥꯏꯟ ꯇꯧꯕꯗꯥ ꯁꯤꯖꯤꯟꯅꯩ꯫
ꯃꯈꯣꯌꯅꯥ ꯃꯇꯧ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ꯫
-
ꯒꯇꯔꯁꯤꯡ ꯑꯁꯤ ꯀꯣꯂꯝ ꯀꯟꯇꯦꯟꯇꯀꯤ ꯃꯔꯛꯇꯥ ꯂꯩꯕꯥ ꯒꯦꯄꯁꯤꯡꯅꯤ, ꯃꯁꯤ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ
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>
ꯒꯇꯔꯁꯤꯡ ꯂꯩꯇꯦ꯫
ꯑꯩꯈꯣꯌꯒꯤ ꯃꯃꯥꯡꯗꯥ ꯂꯦꯄꯊꯣꯛꯂꯕꯥ ꯒ꯭ꯔꯤꯗ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯗꯥ ꯀꯣꯂꯃꯁꯤꯡꯒꯤ ꯃꯔꯛꯇꯥ ꯂꯩꯕꯥ ꯒꯇꯔꯁꯤꯡ ꯑꯁꯤ .g-0
. ꯃꯁꯤꯅꯥ ꯈꯨꯗꯛꯀꯤ ꯑꯣꯏꯕꯥ ꯑꯉꯥꯡꯁꯤꯡꯒꯤ ꯀꯣꯂꯝ ꯄꯨꯝꯅꯃꯛꯇꯒꯤ ꯅꯦꯒꯦꯇꯤꯕ margin
s .row
ꯑꯃꯁꯨꯡ ꯍꯣꯔꯥꯏꯖꯣꯟꯇꯦꯜ ꯑꯗꯨ ꯂꯧꯊꯣꯀꯏ꯫padding
ꯑꯦꯖ-ꯇꯨ-ꯑꯦꯖ ꯗꯤꯖꯥꯏꯟ ꯑꯃꯥ ꯃꯊꯧ ꯇꯥꯕ꯭ꯔꯥ? ꯃꯃꯥ-ꯃꯄꯥ .container
ꯅꯠꯠꯔꯒꯥ .container-fluid
.
ꯊꯧꯑꯣꯡꯗꯥ, ꯃꯐꯝ ꯑꯁꯤꯗꯥ ꯃꯁꯤ ꯀꯔꯝꯅꯥ ꯎꯕꯒꯦ ꯍꯥꯌꯕꯗꯨ ꯌꯦꯡꯕꯤꯌꯨ꯫ ꯅꯣꯠ ꯇꯧꯕꯤꯌꯨ ꯅꯍꯥꯛꯅꯥ ꯃꯁꯤ ꯑꯇꯣꯞꯄꯥ ꯄ꯭ꯔꯤꯗꯤꯐꯥꯏꯗ ꯇꯧꯔꯕꯥ ꯒ꯭ꯔꯤꯗ ꯀ꯭ꯂꯥꯁ ꯄꯨꯝꯅꯃꯛꯀꯥ ꯂꯣꯌꯅꯅꯥ (ꯀꯣꯂꯃꯒꯤ ꯄꯥꯛ ꯆꯥꯎꯕꯥ, ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯇꯌꯥꯔꯁꯤꯡ, ꯔꯤꯑꯣꯔꯗꯔꯁꯤꯡ, ꯑꯃꯁꯨꯡ ꯑꯇꯩ ꯌꯥꯑꯣꯅꯥ) ꯃꯈꯥ ꯇꯥꯅꯥ ꯁꯤꯖꯤꯟꯅꯕꯥ ꯌꯥꯒꯅꯤ꯫
<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>
ꯒꯇꯔꯁꯤꯡ ꯑꯗꯨ ꯍꯣꯡꯗꯣꯀꯎ꯫
ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ $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,
);