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

Vou teks toe met 'n .text-wrapklas.

Hierdie teks moet omvou.

<div class="badge badge-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

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>

Woordbreek

Verhoed dat lang stringe teks jou komponente se uitleg breek deur te gebruik .text-breakom te stel word-wrap: break-worden word-break: break-word. Ons gebruik word-wrapin plaas van die meer algemeen overflow-wrapvir breër blaaierondersteuning, en voeg die afgekeurde word-break: break-wordby om probleme met buigsame houers te vermy.

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>

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.

Helder gewig teks (relatief tot die ouer element).

Normale gewig teks.

Ligte gewig teks.

Ligter gewig teks (relatief tot die ouer element).

Kursief teks.

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

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>

Stel kleur terug

Stel 'n teks of skakel se kleur terug met .text-reset, sodat dit die kleur van sy ouer erf.

Gedempte teks met 'n terugstelskakel .

<p class="text-muted">
  Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>

Teksversiering

Verwyder 'n teksversiering met 'n .text-decoration-noneklas.

Nie-onderstreepte skakel

<a href="#" class="text-decoration-none">Non-underlined link</a>