Main content ah kal rawh Docs navigation ah kal rawh
Check
in English

Utility API hmanga hman theih a ni

Utility API hi Sass hmanga utility class siamna hmanrua a ni.

He page ah hian

Bootstrap utilities hi kan utility API hmanga siam a ni a, Sass kaltlangin kan default set of utility class te siam danglam emaw tihzauh emaw nan kan hmang thei bawk. Kan utility API hi Sass map leh function hrang hrang hmanga class chhungkaw siamna tur option hrang hrang neia siam a ni. Sass maps i hriat loh chuan official Sass docs -ah chhiar la, i tan ang.

Map ah hian $utilitieskan utility zawng zawng a awm a, a hnuah i custom $utilitiesmap nen a inzawm khawm a, a awm chuan. Utility map ah hian a hnuaia option te hi pawmtu utility group keyed list a awm a:

Duhthlanna Lampang Default value a ni Hrilhfiahna
property Mamawh – 100 a ni. Property hming, hei hi string emaw string array (eg, horizontal paddings emaw margins) emaw pawh a ni thei.
values Mamawh – 100 a ni. Value list, a nih loh leh class hming chu value nen a inang duh loh chuan map. nullMap key atana hman a nih chuan class, class hmingah prepend a ni lo.
class Duh zawk thlang engmah lo Class siam chhuah hming. A pek loh leh propertystring array a nih chuan, array classelement hmasa ber ah default ang property. A pek loh leh propertystring a nih chuan valueskey te hi classhming atan hman a ni.
css-var Duh zawk thlang false Boolean hmangin CSS rules ai chuan CSS variable siam tur a ni.
css-variable-name Duh zawk thlang engmah lo Ruleset chhunga CSS variable awmna tur hming custom un-prefixed.
local-vars Duh zawk thlang engmah lo CSS rules bakah local CSS variable siam tur map.
state Duh zawk thlang engmah lo Pseudo-class variant (eg, :hoveror :focus) siam tur list.
responsive Duh zawk thlang false Boolean hian responsive class siam tur a nih leh nih loh a tarlang.
rfs Duh zawk thlang false Boolean hmangin RFS hmanga fluid rescaling tih theih a ni .
print Duh zawk thlang false Boolean hian print class siam a ngai em tih a tarlang.
rtl Duh zawk thlang true Boolean hian utility chu RTL-ah dah tur a nih leh nih loh a tarlang.

API chuan a hrilhfiah a

Utility variable zawng zawng hi kan stylesheet $utilitieschhunga variable ah hian kan dah vek a. _utilities.scssUtility group tin hi hetiang hian an lang a:

$utilities: (
  "opacity": (
    property: opacity,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Chu chuan a hnuaia mi te hi a output a ni:

.opacity-0 { opacity: 0; }
.opacity-25 { opacity: .25; }
.opacity-50 { opacity: .5; }
.opacity-75 { opacity: .75; }
.opacity-100 { opacity: 1; }

Thilneih

Utility eng pawh tan key mamawh propertychu set tur a ni a, chutah chuan CSS property dik tak a awm tur a ni. He property hi generated utility-a ruleset-ah hman a ni. Key chu paih a nih classchuan default class hming atan pawh a tangkai hle. text-decorationUtility chu han ngaihtuah teh :

$utilities: (
  "text-decoration": (
    property: text-decoration,
    values: none underline line-through
  )
);

Output: 1.1.

.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }
.text-decoration-line-through { text-decoration: line-through !important; }

Hlutna hrang hrang

Key hmangin class hming leh rules siam chhuah zingah valueseng value nge hman tur tih tarlang rawh. propertyList emaw map emaw pawh a ni thei (utilities-ah emaw Sass variable-ah emaw set).

List angin, text-decorationutilities te nen ang bawkin :

values: none underline line-through

Map angin, opacityutilities ang bawkin :

values: (
  0: 0,
  25: .25,
  50: .5,
  75: .75,
  100: 1,
)

List emaw map emaw set tu Sass variable angin, kan positionutilities -a ang bawkin :

values: $position-values

Pawl

classCompiled CSS-a class prefix hman thin chu thlak turin option hmang ang che . Entirnan, atanga a thlak .opacity-*tur chuan .o-*:

$utilities: (
  "opacity": (
    property: opacity,
    class: o,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Output: 1.1.

.o-0 { opacity: 0 !important; }
.o-25 { opacity: .25 !important; }
.o-50 { opacity: .5 !important; }
.o-75 { opacity: .75 !important; }
.o-100 { opacity: 1 !important; }

If , key class: nullpakhat zel tan class a siam chhuak thin :values

$utilities: (
  "visibility": (
    property: visibility,
    class: null,
    values: (
      visible: visible,
      invisible: hidden,
    )
  )
);

Output: 1.1.

.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

CSS variable utilities te pawh a awm bawk

css-varBoolean option chu set la, API chuan rules truepangngai aiah selector pek tawh tan local CSS variable a siam ang . Class hming aia CSS variable hming danglam tak set turin property: valueoptional add bawk ang che.css-variable-name

Kan .text-opacity-*utilities te hi han ngaihtuah teh. Option kan add chuan css-variable-namecustom output kan hmu ang.

$utilities: (
  "text-opacity": (
    css-var: true,
    css-variable-name: text-alpha,
    class: text-opacity,
    values: (
      25: .25,
      50: .5,
      75: .75,
      100: 1
    )
  ),
);

Output: 1.1.

.text-opacity-25 { --bs-text-alpha: .25; }
.text-opacity-50 { --bs-text-alpha: .5; }
.text-opacity-75 { --bs-text-alpha: .75; }
.text-opacity-100 { --bs-text-alpha: 1; }

Local CSS variable te a awm bawk

local-varsUtility class ruleset chhunga local CSS variable siamtu tur Sass map tarlang turin option hmang rawh . Khawngaihin, CSS rules siam chhuah zingah chuan chutiang local CSS variable te chu consume tur chuan hna thawh belh a ngai mai thei tih hre reng ang che. Entirnan, kan .bg-*utilities te hi han ngaihtuah teh:

$utilities: (
  "background-color": (
    property: background-color,
    class: bg,
    local-vars: (
      "bg-opacity": 1
    ),
    values: map-merge(
      $utilities-bg-colors,
      (
        "transparent": transparent
      )
    )
  )
);

Output: 1.1.

.bg-primary {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

State hrang hrangte

statePseudo-class variation siam nan option hmang rawh . Entirnan pseudo-classes te chu :hoverleh :focus. State list pek a nih chuan chu pseudo-class tan chuan classname siam a ni. Entirnan, hover-a opacity thlak tur chuan add la, i compiled CSS kha i state: hoverlut ang ..opacity-hover:hover

Pseudo-classes tam tak mamawh em? State hrang hrangte chu space-a then hran theih list hmang rawh: state: hover focus.

$utilities: (
  "opacity": (
    property: opacity,
    class: opacity,
    state: hover,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Output: 1.1.

.opacity-0-hover:hover { opacity: 0 !important; }
.opacity-25-hover:hover { opacity: .25 !important; }
.opacity-50-hover:hover { opacity: .5 !important; }
.opacity-75-hover:hover { opacity: .75 !important; }
.opacity-100-hover:hover { opacity: 1 !important; }

Chhanna pe thei

Breakpoint zawng zawngah responsive utilities (eg, ) responsivesiam turin boolean chu add rawh ..opacity-md-25

$utilities: (
  "opacity": (
    property: opacity,
    responsive: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Output: 1.1.

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media (min-width: 576px) {
  .opacity-sm-0 { opacity: 0 !important; }
  .opacity-sm-25 { opacity: .25 !important; }
  .opacity-sm-50 { opacity: .5 !important; }
  .opacity-sm-75 { opacity: .75 !important; }
  .opacity-sm-100 { opacity: 1 !important; }
}

@media (min-width: 768px) {
  .opacity-md-0 { opacity: 0 !important; }
  .opacity-md-25 { opacity: .25 !important; }
  .opacity-md-50 { opacity: .5 !important; }
  .opacity-md-75 { opacity: .75 !important; }
  .opacity-md-100 { opacity: 1 !important; }
}

@media (min-width: 992px) {
  .opacity-lg-0 { opacity: 0 !important; }
  .opacity-lg-25 { opacity: .25 !important; }
  .opacity-lg-50 { opacity: .5 !important; }
  .opacity-lg-75 { opacity: .75 !important; }
  .opacity-lg-100 { opacity: 1 !important; }
}

@media (min-width: 1200px) {
  .opacity-xl-0 { opacity: 0 !important; }
  .opacity-xl-25 { opacity: .25 !important; }
  .opacity-xl-50 { opacity: .5 !important; }
  .opacity-xl-75 { opacity: .75 !important; }
  .opacity-xl-100 { opacity: 1 !important; }
}

@media (min-width: 1400px) {
  .opacity-xxl-0 { opacity: 0 !important; }
  .opacity-xxl-25 { opacity: .25 !important; }
  .opacity-xxl-50 { opacity: .5 !important; }
  .opacity-xxl-75 { opacity: .75 !important; }
  .opacity-xxl-100 { opacity: 1 !important; }
}

Print rawh

printOption enable hian print atan utility class a siam bawk@media print { ... } ang a, chu chu media query chhungah chauh hman a ni.

$utilities: (
  "opacity": (
    property: opacity,
    print: true,
    values: (
      0: 0,
      25: .25,
      50: .5,
      75: .75,
      100: 1,
    )
  )
);

Output: 1.1.

.opacity-0 { opacity: 0 !important; }
.opacity-25 { opacity: .25 !important; }
.opacity-50 { opacity: .5 !important; }
.opacity-75 { opacity: .75 !important; }
.opacity-100 { opacity: 1 !important; }

@media print {
  .opacity-print-0 { opacity: 0 !important; }
  .opacity-print-25 { opacity: .25 !important; }
  .opacity-print-50 { opacity: .5 !important; }
  .opacity-print-75 { opacity: .75 !important; }
  .opacity-print-100 { opacity: 1 !important; }
}

Pawimawhna

API atanga utility siam zawng zawng !importanthian component leh modifier class te chu a tum angin an override theih nan a huam vek a ni. $enable-important-utilitiesHe setting hi global-in variable (defaults to ) hmangin i toggle thei truebawk.

API hmangin

Tunah chuan utilities API hnathawh dan i hre tawh a, nangmah ngeiin custom class add dan tur leh kan default utilities te siam danglam dan tur zir rawh.

Utilities te chu override rawh

Key inang hmangin utility awmsa te chu override rawh. Entirnan, responsive overflow utility class dang i duh chuan hetiang hian i ti thei ang:

$utilities: (
  "overflow": (
    responsive: true,
    property: overflow,
    values: visible hidden scroll auto,
  ),
);

Utilities te pawh a awm bawk

$utilitiesDefault map ah hian utility thar dah theih a ni a map-merge. Kan mamawh Sass files te _utilities.scsschu import hmasa phawt la, chutah chuan map-mergei additional utilities te add turin the hmang rawh. Entirnan, hetah hian cursorvalue pathum nei responsive utility add dan tur kan rawn tarlang e.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

@import "bootstrap/scss/utilities/api";

Utilities te siam danglam thin

Default $utilitiesmap -a utility awmsa te chu map-getleh map-mergefunction te nen siam danglam rawh. A hnuaia entirnan hian widthutilities-ah hian value dang kan dah belh a ni. Initial hmangin tan la, map-mergeeng utility nge i siam danglam duh tih ziak rawh. Chuta tang chuan nested "width"map chu fetch la, map-getutility-a option leh value te chu access leh modify rawh.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": map-merge(
      map-get($utilities, "width"),
      (
        values: map-merge(
          map-get(map-get($utilities, "width"), "values"),
          (10: 10%),
        ),
      ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

Responsive tih theih a ni

Utility set awm tawh, tuna default-a responsive lote tan responsive class i enable thei bawk. Entirnan, borderclass-te chhanna pe thei tura siam turin:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

Tunah chuan hei hian breakpoint tin .borderleh a tan responsive variation a siam dawn a ni. .border-0I CSS siam chu hetiang hian a awm ang:

.border { ... }
.border-0 { ... }

@media (min-width: 576px) {
  .border-sm { ... }
  .border-sm-0 { ... }
}

@media (min-width: 768px) {
  .border-md { ... }
  .border-md-0 { ... }
}

@media (min-width: 992px) {
  .border-lg { ... }
  .border-lg-0 { ... }
}

@media (min-width: 1200px) {
  .border-xl { ... }
  .border-xl-0 { ... }
}

@media (min-width: 1400px) {
  .border-xxl { ... }
  .border-xxl-0 { ... }
}

Utilities te hming thlak leh rawh

v4 utilities awm lo, a nih loh leh naming convention dang hman tawh? Utilities API hi utility pek atanga result override nan hman theih a ni class—entir nan, .ms-*utilities hming chu oldish ah thlak theih a ni .ml-*:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities, (
    "margin-start": map-merge(
      map-get($utilities, "margin-start"),
      ( class: ml ),
    ),
  )
);

@import "bootstrap/scss/utilities/api";

Utilities te chu paih chhuak rawh

map-remove()Sass function hmangin default utility eng emaw zat chu paih chhuak rawh .

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

// Remove multiple utilities with a comma-separated list
$utilities: map-remove($utilities, "width", "float");

@import "bootstrap/scss/utilities/api";

map-merge()Sass function hmangin group key to set hmangin nullutility chu i paih chhuak thei bawk.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    "width": null
  )
);

@import "bootstrap/scss/utilities/api";

Add, paih, siam danglam

map-merge()Sass function hmang hian vawi khatah utility tam tak i dah belh thei a, i paih thei a, i siam danglam thei bawk. Entirna hmasa te kha map lian zawk pakhata i dahkhawm theih dan chu hetiang hi a ni.

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$utilities: map-merge(
  $utilities,
  (
    // Remove the `width` utility
    "width": null,

    // Make an existing utility responsive
    "border": map-merge(
      map-get($utilities, "border"),
      ( responsive: true ),
    ),

    // Add new utilities
    "cursor": (
      property: cursor,
      class: cursor,
      responsive: true,
      values: auto pointer grab,
    )
  )
);

@import "bootstrap/scss/utilities/api";

RTL ah utility chu paih chhuak rawh

Edge case thenkhat chuan RTL styling a ti harsa , Arabic tawnga line break ang chi te. rtlChutiang chuan utilities chu RTL output atang chuan option chu hetiang hian dahin drop theih a ni false:

$utilities: (
  "word-wrap": (
    property: word-wrap word-break,
    class: text,
    values: (break: break-word),
    rtl: false
  ),
);

Output: 1.1.

/* rtl:begin:remove */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
}
/* rtl:end:remove */

Hei hian RTL ah engmah a output lo a, RTLCSS removecontrol directive vang a ni .