Tɛks
Dokumɛnt ɛn ɛgzampul fɔ kɔmɔn tɛks yutiliti fɔ kɔntrol alaynɛshɔn, rap, wet, ɛn ɔda tin dɛn.
Teks alaynɛshɔn
I izi fɔ rialayn tɛks to kɔmpɔnɛnt dɛn wit tɛks alaynɛshɔn klas dɛn.
Sɔm pleshɔlda tɛks fɔ sho se dɛn rayt di tɛks alaynɛshɔn. Yu go du di sem tin fɔ mi? Na taim fo fes di myusik I no bi yu muse igen. Yeh se i fayn, bi di joj en mi gyal pikin dem go tek vot. A kin fil wan finiks insay mi. Ɛvin de jɛlɔs wi lɔv, enjɛl dɛn de kray frɔm ɔp. Yea, yu tek mi go utopia.
<p class="text-justify">Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>
Fɔ lɛft, rayt, ɛn sɛnta alaynɛshɔn, rispɔnsiv klas dɛn de we de yuz di sem viupɔt wid brekpɔynt dɛn we di grid sistem de yuz.
Left alaynɛt tɛks pan ɔl di sayz dɛn fɔ di viupɔt.
Sɛntral alaynɛd tɛks pan ɔl di sayz dɛn fɔ di viupɔt.
Rayt alaynɛt tɛks pan ɔl di sayz dɛn fɔ di viupɔt.
Left alaynɛt tɛks pan viupɔt dɛn we gɛt saiz SM (smɔl) ɔ we big pas dat.
Left alayned tɛks pan viupɔt dɛn we gɛt saiz MD (midul) ɔ we big pas dat.
Left alaynɛt tɛks pan viupɔt dɛn we gɛt LG (big) ɔ we big pas dat.
Left alayned tɛks pan viupɔt dɛn we gɛt sayz XL (ɛkstra-big) ɔ we big pas dat.
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
Tekst wrap ɛn ɔvaflɔ
Rap tɛks wit wan .text-wrap
klas.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
Nɔ mek tɛks nɔ rap wit wan .text-nowrap
klas.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
Fɔ mek yu gɛt lɔng kɔntinyu, yu kin ad wan .text-truncate
klas fɔ kɔt di tɛks wit ɛlipsis. I nid fɔ gɛt display: inline-block
ɔ display: block
.
<!-- Block level -->
<div class="row">
<div class="col-2 text-truncate">
Praeterea iter est quasdam res quas ex communi.
</div>
</div>
<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
Praeterea iter est quasdam res quas ex communi.
</span>
Wod brek
Nɔ mek lɔng string dɛn na tɛks brok yu kɔmpɔnɛnt dɛn layout bay we yu yuz .text-break
fɔ sɛt word-wrap: break-word
ɛn word-break: break-word
. Wi de yuz word-wrap
insted ɔf di mɔ kɔmɔn overflow-wrap
fɔ wida brawza sɔpɔt, ɛn ad di deprecated word-break: break-word
fɔ avɔyd prɔblɛm wit fleks kɔntena dɛn.
Mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
Tekst transfɔm
Transfɔm tɛks insay kɔmpɔnɛnt dɛn wit tɛks kapitaylayz klas dɛn.
Tekst we gɛt smɔl smɔl lɛta dɛn.
Di tɛks we gɛt big big lɛta dɛn.
Tekst we dɛn dɔn Kapitaliz.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Notis aw i .text-capitalize
jɔs de chenj di fɔs lɛta fɔ ɛni wɔd, ɛn lɛf di kes fɔ ɛni ɔda lɛta nɔ afɛkt.
Fɔnt wet ɛn italiks
Chenj di wet (boldnɛs) fɔ di tɛks kwik kwik wan ɔ rayt di tɛks italiks.
Tekst we gɛt bold.
Bolder weit tɛks (rilaytiv to di mama ɛn papa ɛlimɛnt).
Nɔmal wet tɛks.
Layt wet tɛks.
Layt wet tɛks (rilaytiv to di mama ɛn papa ɛlimɛnt).
Tekst we dɛn rayt wit italik.
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
<p class="font-italic">Italic text.</p>
Monospɛs
Chenj wan sɛlɛkshɔn to wi monospace font stak wit .text-monospace
.
Dis na insay wan ples
<p class="text-monospace">This is in monospace</p>
Riset di kɔlɔ
Riset wan tɛks ɔ link in kɔlɔ wit .text-reset
, so dat i go gɛt di kɔlɔ frɔm in mama ɔ papa.
Tekst we dɛn dɔn muv wit wan link we de riset .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
Teks dɛkɔreshɔn
Rimov wan tɛks dɛkɔreshɔn wit wan .text-decoration-none
klas.
<a href="#" class="text-decoration-none">Non-underlined link</a>