Text

Dokumentácia a príklady bežných textových nástrojov na ovládanie zarovnania, zalamovania, hmotnosti a podobne.

Zarovnanie textu

Pomocou tried zarovnania textu môžete jednoducho znova zarovnať text ku komponentom.

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. V no 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>

Pre zarovnanie vľavo, vpravo a na stred sú k dispozícii responzívne triedy, ktoré používajú rovnaké zarážky šírky výrezu ako systém mriežky.

Text zarovnaný doľava vo všetkých veľkostiach výrezu.

Text zarovnaný na stred vo všetkých veľkostiach výrezu.

Text zarovnaný doprava vo všetkých veľkostiach výrezu.

Text zarovnaný doľava vo výrezoch veľkosti SM (malé) alebo širšie.

Text zarovnaný doľava vo výrezoch veľkosti MD (stredný) alebo širší.

Text zarovnaný doľava na výrezoch veľkosti LG (veľké) alebo širšie.

Text zarovnaný doľava vo výrezoch veľkosti XL (extra veľké) alebo širších.

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

Zalamovanie a pretečenie textu

Zabráňte zalomeniu textu s .text-nowraptriedou.

Tento text by mal presahovať nadradeného.

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

Pre dlhší obsah môžete pridať .text-truncatetriedu na skrátenie textu pomocou troch bodiek. Vyžaduje display: inline-blockalebo 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>

Transformácia textu

Transformujte text do komponentov pomocou tried veľkých písmen.

Text s malými písmenami.

Text písaný veľkými písmenami.

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

Všimnite si, ako text-capitalizesa zmení iba prvé písmeno každého slova, pričom veľkosť všetkých ostatných písmen zostane nezmenená.

Váha písma a kurzíva

Rýchlo zmeňte váhu (tučné) textu alebo kurzívu.

Tučný text.

Text s normálnou hmotnosťou.

Ľahký text.

Kurzíva.

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