Teks
Dokumentasie en voorbeelde vir algemene tekshulpmiddels om belyning, omvou, gewig en meer te beheer.
Herbelyn teks maklik na komponente met teksbelyningsklasse.
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. By nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>
Vir links-, regs- en middelbelyning is responsiewe klasse beskikbaar wat dieselfde kykpoortwydte-breekpunte as die roosterstelsel gebruik.
Linksbelynde teks op alle kykportgroottes.
Sentreer-belynde teks op alle viewport-groottes.
Regsbelynde teks op alle viewport-groottes.
Linksbelynde teks op kykpoorte met die grootte SM (klein) of wyer.
Links-belynde teks op kykpoorte met 'n grootte MD (medium) of wyer.
Linksbelynde teks op kykpoorte van LG (groot) of breër.
Linksbelynde teks op uitsigpoorte van grootte XL (ekstra groot) of wyer.
<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>
Verhoed dat teks met 'n .text-nowrap
klas toevou.
<div class="text-nowrap" style="width: 8rem;">
This text should overflow the parent.
</div>
Vir langer inhoud, kan jy 'n .text-truncate
klas byvoeg om die teks met 'n ellips af te kap. Vereis display: inline-block
of 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>
Transformeer teks in komponente met tekshoofletterklasse.
Teks met klein letters.
Teks met hoofletters.
Gekapitaliseerde teks.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Let op hoe text-capitalize
net die eerste letter van elke woord verander, wat die hoofletters van enige ander letters onaangeraak laat.
Verander vinnig die gewig (vetheid) van teks of kursief teks.
Vet teks.
Normale gewig teks.
Ligte gewig teks.
Kursief teks.
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</p>
<p class="font-italic">Italic text.</p>