Display property a awm bawk

Kan display utilities hmang hian components leh thil dang tam tak display value chu rang tak leh chhanglet takin toggle theih a ni. Value hman tlanglawn zawk thenkhat support a awm a, chubakah print huna display control na tur extra thenkhat a awm bawk.

He page ah hian

A hnathawh dan

Kan responsive display utility class hmangin displayproperty value chu thlak rawh . Kan tumruh takin value awm thei zawng zawng subset chauh kan support a display. Class te chu i mamawh angin effect hrang hrang atan combine theih a ni.

Notation hmanga ziah a ni

Display utility class breakpoint zawng zawnga hman tur , atanga xsto xxl, te hian breakpoint abbreviation an nei lo. Hei hi a chhan chu chu class te chu atanga min-width: 0;leh chunglam atanga hman a nih avangin media query-in a phuar lo a ni. Mahse, breakpoint dang zawng zawngah chuan breakpoint abbreviation a awm ve tho.

Chutiang a nih avang chuan class hrang hrangte chu hetiang hian an hming vuah a ni:

.d-{value}tanxs
.d-{breakpoint}-{value}for sm, md, lg, xl, leh xxl.

Khawiah nge value chu pakhat a ni:

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

Display value te chu $displaysvariable thlak a, SCSS recompiling hmangin a danglam thei bawk.

Media query te hian screen widths te chu breakpoint pek emaw a aia lian emaw a nghawng a ni . Entirnan, , , leh screen- ah te a .d-lg-noneset a.display: none;lgxlxxl

Entirna te

d-inline a ni

<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>

d-block a ni d-block a ni

<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>

Element hrang hrang thup

Mobile-friendly development chak zawk neih nan device hrang hranga elements entir leh thup nan responsive display class hmang la. Site khata version hrang hrang siam chu pumpelh la, chu ai chuan screen size tin atan elements responsive takin thup rawh.

Element thup tur chuan .d-noneclass emaw class pakhat emaw hmangin .d-{sm,md,lg,xl,xxl}-noneresponsive screen variation eng pawh hmang mai rawh.

Screen size interval pek tawhah chauh element entir tur chuan class pakhat chu .d-*-noneclass nen i inzawm thei .d-*-*a, entirnan .d-none .d-md-block .d-xl-none .d-xxl-nonedevice lian leh lian tih loh screen size zawng zawng tan element chu a thup ang.

Screen lian tham tak a ni	Pawl
Mi zawng zawng chungah thup a ni	`.d-none`
xs ah chauh thup a ni	`.d-none .d-sm-block`
Sm ah chauh thup a ni	`.d-sm-none .d-md-block`
md ah chauh thup a ni	`.d-md-none .d-lg-block`
lg ah chauh thup a ni	`.d-lg-none .d-xl-block`
xl ah chauh thup a ni	`.d-xl-none .d-xxl-block`
xxl ah chauh thup a ni	`.d-xxl-none`
Mi zawng zawng chungah hmuh theih	`.d-block`
xs ah chauh hmuh theih a ni	`.d-block .d-sm-none`
Sm ah chauh hmuh theih a ni	`.d-none .d-sm-block .d-md-none`
md ah chauh hmuh theih a ni	`.d-none .d-md-block .d-lg-none`
lg ah chauh hmuh theih a ni	`.d-none .d-lg-block .d-xl-none`
xl ah chauh hmuh theih a ni	`.d-none .d-xl-block .d-xxl-none`
xxl ah chauh hmuh theih a ni	`.d-none .d-xxl-block`

hide on lg and wider screens

lg aia te zawk screen-ah thup rawh

<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>

Print ah a rawn lang ang

displayKan print display utility class hmanga print kan tih hian element value kan thlak danglam thin. Kan responsive utilities te displayang value te tanpuina a huam tel bawk ..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

Print leh display class te chu a inzawm khawm thei bawk.

Screen Only (Print-ah chauh thup theih)

Print Only (Hide on screen only)

Screen-ah lian thlengin thup la, mahse print-ah erawh entir fo ang che

<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>

Sass a ni

Utilities API hmanga thil tih a ni

Display utilities hi kan utilities API ah hian scss/_utilities.scss. Utilities API hman dan zir rawh.

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