Tekst

Dokumentatsioon ja näited tavapäraste tekstiutiliitide jaoks, et juhtida joondamist, mähkimist, kaalu ja palju muud.

Teksti joondamine

Joondage tekst hõlpsalt komponentideks teksti joondusklasside abil.

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

Vasakule, paremale ja keskele joondamiseks on saadaval reageerivad klassid, mis kasutavad samu vaateava laiuse katkestuspunkte kui ruudustikusüsteem.

Vasakule joondatud tekst kõigis vaateava suurustes.

Keskele joondatud tekst kõigis vaateava suurustes.

Paremale joondatud tekst kõigis vaateava suurustes.

Vasakule joondatud tekst vaateavadel, mille suurus on SM (väike) või laiem.

Vasakule joondatud tekst vaateavadel, mille suurus on MD (keskmine) või laiem.

Vasakule joondatud tekst LG (suur) või laiemate vaateavade puhul.

Vasakule joondatud tekst XL (eriti suur) või laiemates vaateavades.

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

Teksti murdmine ja ületäitumine

.text-nowrapVältige klassiga teksti murdmist .

See tekst peaks üle vanema.

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

Pikema sisu jaoks saate lisada .text-truncateklassi, mis kärbib teksti ellipsiga. Nõuab display: inline-blockvõi 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>

Teksti teisendus

Teisendage tekst komponentideks teksti suurtähtede kasutamise klassidega.

Väiketähtedega tekst.

Suurtähtedega tekst.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

Pange tähele, kuidas text-capitalizemuudab ainult iga sõna esimest tähte, jättes muude tähtede suur- ja väiketähtede muutmata.

Fondi kaal ja kaldkiri

Muutke kiiresti teksti kaalu (paksust) või muutke tekst kaldkirja.

Paks tekst.

Normaalse kaaluga tekst.

Kerge tekst.

Kaldkiri.

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