Teks

Dokumentasie en voorbeelde vir algemene tekshulpmiddels om belyning, omvou, gewig en meer te beheer.

Teksbelyning

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>

Teks omvou en oorloop

Verhoed dat teks met 'n .text-nowrapklas toevou.

Hierdie teks moet die ouer oorloop.

<div class="text-nowrap bd-highlight" style="width: 8rem;">
  This text should overflow the parent.
</div>

Vir langer inhoud, kan jy 'n .text-truncateklas byvoeg om die teks met 'n ellips af te kap. Vereis display: inline-blockof display: block.

Praeterea iter est quasdam res quas ex communi.

<!-- 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>

Teks transformasie

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-capitalizenet die eerste letter van elke woord verander, wat die hoofletters van enige ander letters onaangeraak laat.

Lettertipe gewig en kursief

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>

Monoruimte

Verander 'n keuse na ons monospace font stapel met .text-monospace.

Dit is in monospace

<p class="text-monospace">This is in monospace</p>