Mebala
Fetiša moelelo ka mmala ka seatla se se tletšego sa diklase tša mohola wa mmala. E akaretša thekgo ya dikgokagano tša setaele le dilete tša go hover, le tšona.
Go šomana le go lebanya
Ka nako ye nngwe diklase tša diteng di ka se dirišwe ka lebaka la go kgethegile ga mokgethi yo mongwe. Maemong a mangwe, tharollo ye e lekanego ke go phuthela diteng tša elemente ya gago ka gare ga a <div>le sehlopha.
Go fetišetša tlhalošo go theknolotši ya go thuša
Go šomiša mmala go oketša tlhalošo go fa fela taetšo ya go bonwa, yeo e ka se fetišwego go badiriši ba theknolotši ya go thuša – go swana le babadi ba skrine. Netefatša gore tshedimošo yeo e bontšhitšwego ka mmala e ka ba e bonagala gabotse go tšwa diteng ka botšona (mohlala, sengwalwa se se bonagalago), goba e akaretšwa ka mekgwa ye mengwe, go swana le sengwalwa sa tlaleletšo seo se utilwego le .sr-onlysehlopha.
Mmala
.sengwalwa-ya mathomo
.sengwalwa-sekondari
.katlego ya sengwalwa
.sengwalwa-kotsi
.temošo ya sengwalwa
.tshedimošo ya sengwalwa
.seetša-sengwalwa
.sengwalwa-lefsifsi
.mmele-sengwalwa
.sengwalwa se se kgaotšwego
.sengwalwa-se sešweu
.sengwalwa-se se ntsho-50
.sengwalwa-se sešweu-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>Diklase tša sengwalwa sa seemo le tšona di šoma gabotse go ditshetledi ka maemo a go hover le a go tsepelela ao a filwego. Hlokomela gore sehlopha sa .text-whitele .text-mutedga se na setaele sa tlaleletšo sa kgokagano ka ntle ga thalela.
<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>Mmala wa ka morao
Go swana le diklase ta mebala ya sengwalwa sa diteng, beakanya gabonolo bokamorago bja elemente go sehlopha sefe goba sefe sa seemo. Dikarolo tša ankora di tla fifala ge di hover, go swana le diklase tša sengwalwa. Background utilities do not setcolor , kahoo maemong a mang u tla batla ho sebelisa .text-*utilities.
<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>Gradient ya lemorago
Ge $enable-gradientse beakantšwe go true(default ke false), o ka šomiša .bg-gradient-diklase tša utility. Ithute ka dikgetho tša rena tša Sass go kgontšha diklase tše le tše dingwe.
.bg-gradient-primary.bg-gradient-secondary.bg-gradient-success.bg-gradient-danger.bg-gradient-warning.bg-gradient-info.bg-gradient-light.bg-gradient-dark