Source

Kɔlɔ dɛn

Kɔnvayz minin tru kɔlɔ wit wan anful kɔlɔ yutiliti klas dɛn. Inklud sɔpɔt fɔ stayl link dɛn wit hova stet dɛn, bak.

Kɔlɔ

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

.tɛks-wayt

<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">.text-warning</p>
<p class="text-info">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>

Kɔntɛkstual tɛks klas dɛn de wok fayn bak pan ankɔ dɛn wit di hova ɛn fɔs stet dɛn we dɛn dɔn gi. Notis se di .text-whiteɛn .text-mutedklas nɔ gɛt ɛni link stayl.

<p><a href="#" class="text-primary">Primary link</a></p>
<p><a href="#" class="text-secondary">Secondary link</a></p>
<p><a href="#" class="text-success">Success link</a></p>
<p><a href="#" class="text-danger">Danger link</a></p>
<p><a href="#" class="text-warning">Warning link</a></p>
<p><a href="#" class="text-info">Info link</a></p>
<p><a href="#" class="text-light bg-dark">Light link</a></p>
<p><a href="#" class="text-dark">Dark link</a></p>
<p><a href="#" class="text-muted">Muted link</a></p>
<p><a href="#" class="text-white bg-dark">White link</a></p>

Bakgrɔn kɔlɔ

Semweso lɛk di kɔntɛkstual tɛks kɔlɔ klas dɛn, izi fɔ sɛt di bakgrɔn fɔ wan ɛlimɛnt to ɛni kɔntɛkstual klas. Ankɔ kɔmpɔnɛnt dɛn go dak we yu de hova, jɔs lɛk di tɛks klas dɛn. Bakgrɔn yutiliti dɛn nɔ de sɛtcolor , so insay sɔm kes dɛn yu go want fɔ yuz .text-*yutiliti dɛn.

.bg-praymari
.bg-sɛkɔndari
.bg-sakses we de wok
.bg-denja fɔ de
.bg-wɔn fɔ wɔn
.bg-info fɔ di wan dɛn we de
.bg-layt fɔ di wan dɛn we de
.bg-dak na dak
.bg-wayt fɔ di wan dɛn we de
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>

Bakgrɔn grɛdiɛnt

We $enable-gradientsdɛn sɛt am to tru, yu go ebul fɔ yuz .bg-gradient-yutiliti klas dɛn. Bay difɔlt, $enable-gradientsna disabled ɛn di ɛgzampul we de dɔŋ ya na fɔ brok am bay wilful. Dis na fɔ mek i izi fɔ kɔstɔmayt frɔm di tɛm we yu bigin fɔ yuz Bootstrap. Lan bɔt wi Sass opshɔn dɛn fɔ ɛnabul dɛn klas ya ɛn mɔ.

.bg-grɛdiɛnt-praymari
.bg-gradient-sɛkɔndari
.bg-grɛdiɛnt-sakses
.bg-grɛdiɛnt-denja
.bg-grɛdiɛnt-wɔnin
.bg-grɛdiɛnt-infɔ
.bg-grɛdiɛnt-layt
.bg-grɛdiɛnt-dak
<div class="p-3 mb-2 bg-gradient-primary text-white">.bg-gradient-primary</div>
<div class="p-3 mb-2 bg-gradient-secondary text-white">.bg-gradient-secondary</div>
<div class="p-3 mb-2 bg-gradient-success text-white">.bg-gradient-success</div>
<div class="p-3 mb-2 bg-gradient-danger text-white">.bg-gradient-danger</div>
<div class="p-3 mb-2 bg-gradient-warning text-dark">.bg-gradient-warning</div>
<div class="p-3 mb-2 bg-gradient-info text-white">.bg-gradient-info</div>
<div class="p-3 mb-2 bg-gradient-light text-dark">.bg-gradient-light</div>
<div class="p-3 mb-2 bg-gradient-dark text-white">.bg-gradient-dark</div>

Dil wit spɛsifisiti

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>wit di klas.

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 .sr-onlyklas.