ꯃꯔꯨꯑꯣꯏꯕꯥ ꯀꯟꯇꯦꯟꯇ ꯑꯗꯨꯗꯥ ꯆꯠꯂꯨ꯫ ꯗꯣꯛꯌꯨꯃꯦꯟꯇꯁꯤꯡ ꯅꯦꯚꯤꯒꯦꯁꯅꯗꯥ ꯆꯠꯂꯨ꯫
Check
in English

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

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

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

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

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

ꯅꯣꯇꯦꯁꯟ ꯇꯧꯕꯥ꯫

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

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

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

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

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

ꯗꯤꯁꯞꯂꯦ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯑꯁꯤ ꯑꯦꯁ.ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯇꯥ displayꯁꯦꯃꯗꯣꯀꯄꯥ ꯚꯦꯜꯌꯨꯁꯤꯡ ꯍꯣꯡꯗꯣꯛꯇꯨꯅꯥ ꯑꯃꯁꯨꯡ ꯑꯃꯨꯛ ꯍꯟꯅꯥ ꯀꯝꯄꯥꯏꯜ ꯇꯧꯗꯨꯅꯥ ꯍꯣꯡꯗꯣꯀꯄꯥ ꯌꯥꯏ꯫$utilities

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

ꯈꯨꯗꯃꯁꯤꯡ꯫

ꯗꯤ-ꯏꯅꯂꯥꯏꯟ ꯇꯧꯕꯥ꯫
ꯗꯤ-ꯏꯅꯂꯥꯏꯟ ꯇꯧꯕꯥ꯫
html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<div class="d-inline p-2 text-bg-primary">d-inline</div>
<div class="d-inline p-2 text-bg-dark">d-inline</div>
ꯗꯤ-ꯕ꯭ꯂꯣꯛ ꯇꯧꯕꯥ꯫ ꯗꯤ-ꯕ꯭ꯂꯣꯛ ꯇꯧꯕꯥ꯫
html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<span class="d-block p-2 text-bg-primary">d-block</span>
<span class="d-block p-2 text-bg-dark">d-block</span>

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

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

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

ꯁ꯭ꯛꯔꯤꯟ ꯁꯥꯏꯖꯁꯤꯡꯒꯤ ꯑꯄꯤꯕꯥ ꯏꯟꯇꯔꯚꯜ ꯑꯃꯗꯥ ꯈꯛꯇꯗꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯥ ꯎꯠꯅꯕꯥ ꯅꯍꯥꯛꯅꯥ .d-*-noneꯀ꯭ꯂꯥꯁ ꯑꯃꯒꯥ ꯀ꯭ꯂꯥꯁ ꯑꯃꯒꯥ ꯄꯨꯅꯁꯤꯅꯕꯥ ꯌꯥꯏ .d-*-*, ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ .d-none .d-md-block .d-xl-none .d-xxl-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
xxl ꯈꯛꯇꯗꯥ ꯂꯣꯠꯂꯤ꯫ .d-xxl-none .d-xxl-block
ꯄꯨꯝꯅꯃꯛꯇꯥ ꯎꯕꯥ ꯐꯪꯏ꯫ .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 .d-xxl-none
xxl ꯈꯛꯇꯗꯥ ꯎꯕꯥ ꯐꯪꯏ꯫ .d-none .d-xxl-block
lg ꯑꯃꯁꯨꯡ ꯄꯥꯛ ꯆꯥꯎꯔꯕꯥ ꯁ꯭ꯛꯔꯤꯅꯁꯤꯡꯗꯥ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫
lg ꯗꯒꯤ ꯍꯦꯟꯅꯥ ꯄꯤꯀꯄꯥ ꯁ꯭ꯛꯔꯤꯅꯁꯤꯡꯗꯥ ꯂꯣꯠꯁꯤꯜꯂꯤ꯫
html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<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-grid
  • .d-print-table
  • .d-print-table-row
  • .d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

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

ꯁ꯭ꯛꯔꯤꯟ ꯈꯛꯇꯗꯥ (ꯄ꯭ꯔꯤꯟꯇ ꯈꯛꯇꯗꯥ ꯂꯣꯠꯁꯤꯜꯂꯨ)
ꯄ꯭ꯔꯤꯟꯇ ꯈꯛꯇꯗꯥ (ꯁ꯭ꯛꯔꯤꯟꯗꯥ ꯂꯣꯠꯁꯤꯜꯂꯨ ꯈꯛꯇꯗꯥ)
ꯁ꯭ꯛꯔꯤꯟꯗꯥ ꯑꯆꯧꯕꯥ ꯐꯥꯑꯣꯕꯥ ꯂꯣꯠꯁꯤꯜꯂꯨ, ꯑꯗꯨꯕꯨ ꯃꯇꯝ ꯄꯨꯝꯅꯃꯛꯇꯥ ꯄ꯭ꯔꯤꯟꯇꯇꯥ ꯎꯠꯀꯅꯤ꯫
html ꯒꯤ ꯃꯇꯨꯡ ꯏꯟꯅꯥ ꯄꯤꯔꯤ꯫ 
<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>

ꯁꯥꯁꯁ ꯇꯧꯕꯥ꯫

ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ

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

    "display": (
      responsive: true,
      print: true,
      property: display,
      class: d,
      values: inline inline-block block grid table table-row table-cell flex inline-flex none
    ),