Skip to di men tin dɛn we de insay Skip to doks nevigishɔn
in English

Kɔlɔ dɛn

Konvey minin tru colorwit wan handful of kala yutiliti klas. Inklud sɔpɔt fɔ stayl link dɛn wit hova stet dɛn, bak.

Kɔlɔ dɛn

Kɔlɔ tɛks wit kɔlɔ yutiliti dɛn. If yu wan fɔ kala di link dɛn, yu kin yuz di .link-*ɛp klas dɛn we gɛt :hoverɛn :focusstet dɛn.

.tɛks-praymari

.tɛks-sɛkɔndari

.tɛks-sakses

.tɛks-denja

.tɛks-wɔnin

.tɛks-info

.tɛks-layt

.tɛks-dak

.tɛks-bɔdi

.tɛks-mut

.tɛks-wayt

.tɛks-blak-50

.tɛks-wayt-50

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
Diprɛkeshɔn: Wit di adishɔn fɔ .text-opacity-*yutiliti ɛn CSS vɛriɔbul fɔ tɛks yutiliti, .text-black-50ɛn .text-white-50dɛn dɔn deprɛkt as of v5.1.0. Dɛn go pul dɛn na v6.0.0.
Fɔ gi minin to ɛtɛknɔlɔji dɛn we de ɛp

Yuz kala fɔ ad minin de jɔs gi wan vijual indikashɔn, we dɛn nɔ go gi to di wan dɛn we de yuz ɛtɛknɔlɔji dɛn we de ɛp – lɛk skrin rida dɛn. Mek shɔ se di infɔmeshɔn we dɛn sho wit di kɔlɔ de sho klia wan frɔm di tin we de insay insɛf (ɛgz. di tɛks we yu de si), ɔ dɛn put am insay ɔda we dɛn, lɛk ɔda tɛks we dɛn ayd wit di .visually-hiddenklas.

Opasiti fɔ di tin dɛn we de apin

Dɛn ad am na v5.1.0

As of v5.1.0, tɛks kala yutiliti dɛn de jenarayz wit Sass yuz CSS vɛriɔbul dɛn. Dis alaw fɔ rial-taym kala chenj dɛn we nɔ gɛt kɔmpilayshɔn ɛn dinamik alfa transparency chenj dɛn.

Aw i de wok

Tink bɔt wi difɔlt .text-primaryyutiliti.

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

Wi de yuz wan RGB vɛshɔn fɔ wi --bs-primary(wit di valyu fɔ 13, 110, 253) CSS vɛriɔbul ɛn ataya wan sɛkɔn CSS vɛriɔbul, --bs-text-opacity, fɔ di alfa transparency (wit difɔlt valyu 1tank to wan lokal CSS vɛriɔbul). Dat min se ɛni tɛm we yu yuz .text-primarynaw, yu kɔmpyutayt colorvalyu na rgba(13, 110, 253, 1). Di lokal CSS vɛriɔbul insay ɛni .text-*klas de avɔyd inhɛritɛns ishu dɛn so nest instans dɛn fɔ di yutiliti dɛn nɔ gɛt ɔtomɛtik wan modifyed alfa transparency.

Ɛgzampul

Fɔ chenj da opasiti de, ɔvalayz --bs-text-opacityvia kɔstɔm stayl ɔ inlayn stayl dɛn.

Dis na difɔlt praymari tɛks
Dis na 50% opasiti praymari tɛks
<div class="text-primary">This is default primary text</div>
<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>

Ɔ, pik frɔm ɛni wan pan di .text-opacityyutiliti dɛn:

Dis na difɔlt praymari tɛks
Dis na 75% opasiti praymari tɛks
Dis na 50% opasiti praymari tɛks
Dis na 25% opasiti praymari tɛks
<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>

Spesifi k tin dɛn

Sɔntɛnde, dɛn nɔ kin ebul fɔ yuz kɔntɛkstual klas dɛn bikɔs ɔf di spɛsifisiti fɔ ɔda sɛlɛktɔ. Sɔntɛnde, wan naf wok-arawnd na fɔ rap yu ɛlimɛnt in kɔntinyu insay wan <div>ɔ mɔ sɛmantik ɛlimɛnt wit di klas we yu want.

Sass we bin de

Apat frɔm di Sass funkshɔnaliti dɛn we de dɔŋ ya, tink bɔt fɔ rid bɔt wi inklud CSS kɔstɔm prɔpati dɛn (aka CSS vɛriɔbul dɛn) fɔ kɔlɔ ɛn mɔ.

Di tin dɛn we kin chenj

Mɔs coloryutiliti dɛn de jenarayz bay wi tim kɔlɔ dɛn, we dɛn riasayn frɔm wi jenɛrik kɔlɔ palet vɛriɔbul dɛn.

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;
$primary:       $blue;
$secondary:     $gray-600;
$success:       $green;
$info:          $cyan;
$warning:       $yellow;
$danger:        $red;
$light:         $gray-100;
$dark:          $gray-900;

Greyskɛl kɔlɔ dɛn de bak, bɔt na wan sɔbsɛt nɔmɔ dɛn de yuz fɔ mek ɛni yutiliti.

$white:    #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black:    #000;

Map fɔ di map

Dɔn dɛn kin put tim kɔlɔ dɛn na wan Sass map so dat wi go ebul fɔ lɔp oba dɛn fɔ mek wi yutiliti dɛn, kɔmpɔnɛnt modifya dɛn, ɛn ɔda tin dɛn.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Greyscale kala dɛn de bak as Sass map. Dɛn nɔ de yuz dis map fɔ mek ɛni yutiliti.

$grays: (
  "100": $gray-100,
  "200": $gray-200,
  "300": $gray-300,
  "400": $gray-400,
  "500": $gray-500,
  "600": $gray-600,
  "700": $gray-700,
  "800": $gray-800,
  "900": $gray-900
);

RGB kala dɛn de jenarayz frɔm wan sɛpret Sass map:

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

Ɛn kala opasiti dɛn bil pan dat wit dɛn yon map we di yutiliti dɛn API dɔn it:

$utilities-text: map-merge(
  $utilities-colors,
  (
    "black": to-rgb($black),
    "white": to-rgb($white),
    "body": to-rgb($body-color)
  )
);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");

Yutiliti dɛn API

Kɔlɔ yutiliti dɛn de diklar insay wi yutiliti dɛn API insay scss/_utilities.scss. Lan aw fɔ yuz di yutiliti dɛn API.

    "color": (
      property: color,
      class: text,
      local-vars: (
        "text-opacity": 1
      ),
      values: map-merge(
        $utilities-text-colors,
        (
          "muted": $text-muted,
          "black-50": rgba($black, .5), // deprecated
          "white-50": rgba($white, .5), // deprecated
          "reset": inherit,
        )
      )
    ),
    "text-opacity": (
      css-var: true,
      class: text-opacity,
      values: (
        25: .25,
        50: .5,
        75: .75,
        100: 1
      )
    ),