Source

ꯄ꯭ꯔꯣꯄꯔꯇꯤ ꯎꯠꯄꯥ꯫

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

ꯃꯁꯤ ꯀꯔꯝꯅꯥ ꯊꯕꯛ ꯇꯧꯕꯒꯦ꯫

ꯑꯩꯈꯣꯌꯒꯤ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯗꯤꯁꯞꯂꯦ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ displayꯄ꯭ꯔꯣꯄꯔꯇꯤꯒꯤ ꯚꯦꯜꯌꯨ ꯍꯣꯡꯗꯣꯀꯎ꯫ ꯑꯩꯈꯣꯌꯅꯥ ꯄꯥꯟꯗꯝ ꯊꯃꯗꯨꯅꯥ display. ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯑꯗꯣꯝꯅꯥ ꯃꯊꯧ ꯇꯥꯕꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯇꯣꯉꯥꯟ ꯇꯣꯉꯥꯅꯕꯥ ꯏꯐꯦꯛꯇꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯄꯨꯟꯅꯥ ꯊꯝꯕꯥ ꯌꯥꯏ꯫

ꯅꯣꯇꯦꯁꯟ ꯇꯧꯕꯥ꯫

ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯆꯠꯅꯕꯥ ꯌꯥꯕꯥ ꯗꯤꯁꯞꯂꯦ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ,ꯗꯒꯤ xs, xlꯃꯈꯣꯌꯗꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯑꯦꯕꯕ꯭ꯔꯤꯕꯤꯌꯔ ꯑꯃꯠꯇꯥ ꯂꯩꯇꯦ꯫ ꯃꯁꯤꯒꯤ ꯃꯔꯃꯗꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯗꯨꯗꯒꯤ min-width: 0;ꯑꯃꯁꯨꯡ ꯃꯊꯛꯇꯥ ꯑꯦꯞꯂꯥꯏ ꯇꯧꯏ, ꯑꯃꯁꯨꯡ ꯃꯔꯝ ꯑꯁꯤꯅꯥ ꯃꯦꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤ ꯑꯃꯅꯥ ꯕꯣꯟꯗ ꯇꯧꯗꯦ꯫ ꯑꯗꯨꯝ ꯑꯣꯏꯅꯃꯛ, ꯂꯦꯃꯍꯧꯔꯤꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇꯁꯤꯡꯗꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯑꯦꯕꯕ꯭ꯔꯤꯕꯤꯌꯔ ꯑꯃꯥ ꯌꯥꯑꯣꯔꯤ꯫

ꯑꯁꯤꯒꯨꯝꯕꯥ ꯃꯑꯣꯡꯗꯥ, ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯐꯣꯔꯃꯦꯠ ꯑꯁꯤ ꯁꯤꯖꯤꯟꯅꯗꯨꯅꯥ ꯃꯃꯤꯡ ꯊꯣꯜꯂꯤ:

.d-{value}ꯒꯤꯗꯃꯛ꯫xs
.d-{breakpoint}-{value}ꯒꯤꯗꯃꯛ sm, md, lg, ꯑꯃꯁꯨꯡ xl.

ꯚꯦꯜꯌꯨ ꯑꯁꯤ ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯑꯁꯤꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯅꯤ ꯍꯥꯌꯕꯥ ꯃꯐꯝ ꯑꯗꯨꯗꯥ:

none
inline
inline-block
block
table
table-cell
table-row
flex
inline-flex

ꯗꯤꯁꯞꯂꯦ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯑꯁꯤ ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯗꯨ ꯍꯣꯡꯗꯣꯛꯇꯨꯅꯥ $displaysꯑꯃꯁꯨꯡ ꯑꯦꯁ.ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.

ꯃꯤꯗꯤꯌꯥ ꯀ꯭ꯕꯦꯔꯤꯁꯤꯡ ꯑꯁꯤꯅꯥ ꯄꯤꯔꯤꯕꯥ ꯕ꯭ꯔꯦꯀꯄꯣꯏꯟꯇ ꯅꯠꯠꯔꯒꯥ ꯃꯁꯤꯗꯒꯤ ꯍꯦꯅꯕꯥ ꯁ꯭ꯛꯔꯤꯟ ꯋꯥꯏꯗꯁꯤꯡꯗꯥ ꯏꯐꯦꯛꯇ ꯇꯧꯏ . ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯑꯅꯤꯃꯛꯇꯥ ꯑꯃꯁꯨꯡ ꯁ꯭ꯛꯔꯤꯅꯁꯤꯡꯗꯥ .d-lg-noneꯁꯦꯠ ꯇꯧꯏ꯫display: none;lgxl

ꯈꯨꯗꯃꯁꯤꯡ꯫

ꯗꯤ-ꯏꯅꯂꯥꯏꯟ ꯇꯧꯕꯥ꯫

<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>

ꯗꯤ-ꯕ꯭ꯂꯣꯛ ꯇꯧꯕꯥ꯫ ꯗꯤ-ꯕ꯭ꯂꯣꯛ ꯇꯧꯕꯥ꯫

<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>

ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯂꯣꯠꯁꯤꯅꯕꯥ꯫

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

ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡ ꯂꯣꯠꯁꯤꯟꯅꯕꯥ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯁ꯭ꯛꯔꯤꯟ ꯚꯦꯔꯤꯑꯦꯁꯟ ꯑꯃꯍꯦꯛꯇꯒꯤꯗꯃꯛ .d-noneꯀ꯭ꯂꯥꯁ ꯅꯠꯠꯔꯒꯥ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯤ ꯃꯅꯨꯡꯗꯥ ꯑꯃꯕꯨ ꯁꯨꯞꯅꯒꯤ ꯁꯤꯖꯤꯟꯅꯧ꯫.d-{sm,md,lg,xl}-none

ꯁ꯭ꯛꯔꯤꯟ ꯁꯥꯏꯖꯁꯤꯡꯒꯤ ꯑꯄꯤꯕꯥ ꯏꯟꯇꯔꯚꯜ ꯑꯃꯈꯛꯇꯗꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯎꯠꯅꯕꯥ ꯅꯍꯥꯛꯅꯥ .d-*-noneꯀ꯭ꯂꯥꯁ ꯑꯃꯒꯥ ꯀ꯭ꯂꯥꯁ ꯑꯃꯒꯥ ꯄꯨꯅꯁꯤꯅꯕꯥ ꯌꯥꯏ .d-*-*, ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ .d-none .d-md-block .d-xl-noneꯃꯤꯗꯤꯌꯝ ꯑꯃꯁꯨꯡ ꯑꯆꯧꯕꯥ ꯗꯤꯚꯥꯏꯁꯁꯤꯡ ꯅꯠꯇꯅꯥ ꯁ꯭ꯛꯔꯤꯟ ꯁꯥꯏꯖ ꯄꯨꯝꯅꯃꯛꯀꯤꯗꯃꯛ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯗꯨ ꯂꯣꯠꯁꯤꯅꯒꯅꯤ꯫

ꯁ꯭ꯛꯔꯤꯟ ꯁꯥꯏꯖ꯫	ꯀ꯭ꯂꯥꯁ
ꯄꯨꯝꯅꯃꯛꯇꯥ ꯂꯣꯠꯁꯤꯜꯂꯦ꯫	`.d-none`
xs ꯈꯛꯇꯗꯥ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫	`.d-none .d-sm-block`
sm ꯈꯛꯇꯗꯥ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫	`.d-sm-none .d-md-block`
md ꯈꯛꯇꯗꯥ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫	`.d-md-none .d-lg-block`
lg ꯈꯛꯇꯗꯥ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫	`.d-lg-none .d-xl-block`
xl ꯈꯛꯇꯗꯥ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫	`.d-xl-none`
ꯄꯨꯝꯅꯃꯛꯇꯥ ꯎꯕꯥ ꯐꯪꯏ꯫	`.d-block`
xs ꯈꯛꯇꯗꯥ ꯎꯕꯥ ꯐꯪꯏ꯫	`.d-block .d-sm-none`
sm ꯈꯛꯇꯗꯥ ꯎꯕꯥ ꯐꯪꯒꯅꯤ꯫	`.d-none .d-sm-block .d-md-none`
md ꯈꯛꯇꯗꯥ ꯎꯕꯥ ꯐꯪꯒꯅꯤ꯫	`.d-none .d-md-block .d-lg-none`
lg ꯈꯛꯇꯗꯥ ꯎꯕꯥ ꯐꯪꯏ꯫	`.d-none .d-lg-block .d-xl-none`
xl ꯈꯛꯇꯗꯥ ꯎꯕꯥ ꯐꯪꯒꯅꯤ꯫	`.d-none .d-xl-block`

hide on lg and wider screens

lg ꯗꯒꯤ ꯍꯦꯟꯅꯥ ꯄꯤꯀꯄꯥ ꯁ꯭ꯛꯔꯤꯅꯁꯤꯡꯗꯥ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫

<div class="d-lg-none">hide on lg and wider screens</div>
<div class="d-none d-lg-block">hide on screens smaller than lg</div>

ꯄ꯭ꯔꯤꯟꯇꯇꯥ ꯎꯠꯄꯥ꯫

displayꯑꯩꯈꯣꯌꯒꯤ ꯄ꯭ꯔꯤꯟꯇ ꯗꯤꯁꯞꯂꯦ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯄ꯭ꯔꯤꯟꯇ ꯇꯧꯕꯥ ꯃꯇꯃꯗꯥ ꯑꯦꯂꯤꯃꯦꯟꯇꯁꯤꯡꯒꯤ ꯚꯦꯜꯌꯨ ꯍꯣꯡꯗꯣꯀꯎ꯫ ꯑꯩꯈꯣꯌꯒꯤ ꯔꯦꯁ꯭ꯄꯣꯟꯁꯤꯕꯜ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯥ ꯃꯥꯟꯅꯕꯥ displayꯚꯦꯜꯌꯨꯁꯤꯡꯒꯤ ꯁꯄꯣꯔꯠ ꯌꯥꯑꯣꯔꯤ꯫.d-*

.d-print-none
.d-print-inline
.d-print-inline-block
.d-print-block
.d-print-table
.d-print-table-row
.d-print-table-cell
.d-print-flex
.d-print-inline-flex

ꯄ꯭ꯔꯤꯟꯇ ꯑꯃꯁꯨꯡ ꯗꯤꯁꯞꯂꯦ ꯀ꯭ꯂꯥꯁꯁꯤꯡ ꯑꯁꯤ ꯄꯨꯟꯅꯥ ꯊꯝꯕꯥ ꯌꯥꯏ꯫

ꯁ꯭ꯛꯔꯤꯟ ꯈꯛꯇꯗꯥ (ꯄ꯭ꯔꯤꯟꯇ ꯈꯛꯇꯗꯥ ꯂꯣꯠꯁꯤꯜꯂꯨ)

Print Only (Hide on screen only)

ꯁ꯭ꯛꯔꯤꯟꯗꯥ ꯑꯆꯧꯕꯥ ꯐꯥꯑꯣꯕꯥ ꯂꯣꯠꯁꯤꯜꯂꯨ, ꯑꯗꯨꯕꯨ ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯄ꯭ꯔꯤꯟꯇꯇꯥ ꯎꯠꯀꯅꯤ꯫

<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>