Culori
Trasmette u significatu attraversu u culore cù una manciata di classi di utilità di culore. Include ancu supportu per i ligami di stili cù stati di hover.
Trattamentu di specificità
A volte e classi contextuale ùn ponu esse applicate per via di a specificità di un altru selettore. In certi casi, una soluzione sufficente hè di imbulighjà u cuntenutu di u vostru elementu in una <div>cù a classe.
Trasmette u significatu à e tecnulugia assistive
Utilizà u culore per aghjunghje significatu solu furnisce una indicazione visuale, chì ùn serà micca trasmessa à l'utilizatori di tecnulugii assistivi - cum'è i lettori di schermu. Assicuratevi chì l'infurmazione denotata da u culore sia ovvia da u cuntenutu stessu (per esempiu, u testu visibile), o hè inclusa per mezu alternativu, cum'è testu addiziale oculatu cù a .sr-onlyclasse.
Culore
.testu-primariu
.testu-secundariu
.testu-successu
.testu-periculu
.text-avvertimentu
.text-info
.testu-luce
.testu-scuru
.testu-corpu
.text-muted
.testu-biancu
.testu-neru-50
.testu-biancu-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">.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-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>E classi di testu cuntestuali funzionanu ancu bè nantu à l'ancore cù i stati furniti di hover è focus. Nota chì a classa .text-whiteè .text-mutedùn hà micca un stilu di ligame supplementu oltre u sottolineatu.
<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>Culore di fondu
Simile à e classi di culore di testu contextuale, facilmente stabilisce u sfondate di un elementu à qualsiasi classi contextuale. I cumpunenti di l'ancora si scuriscenu nantu à u passaghju, cum'è e classi di testu. L'utilità di fondo ùn sò micca stabilitecolor , cusì in certi casi vulete usà l' .text-*utilità.
<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>
<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>Gradiente di fondo
Quandu $enable-gradientshè stabilitu à true(predeterminatu hè false), pudete aduprà .bg-gradient-classi di utilità. Amparate nantu à e nostre opzioni Sass per attivà queste classi è più.
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark