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

Zalamovanie textu .text-wraptriedou.

Tento text by sa mal zalomiť.

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

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

Tento text by mal presahovať nadradeného.

<div class="text-nowrap bd-highlight" 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 tučnejšou váhou (vo vzťahu k rodičovskému prvku).

Text s normálnou hmotnosťou.

Ľahký text.

Ľahší text (v porovnaní s nadradeným prvkom).

Kurzíva.

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

Monospace

Zmeňte výber na naše jednopriestorové písmo pomocou .text-monospace.

Toto je v monopriestore

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

Obnoviť farbu

Obnovte farbu textu alebo odkazu pomocou .text-reset, aby zdedil farbu od svojho rodiča.

Stlmený text s odkazom na obnovenie .

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

Textová výzdoba

Odstráňte textovú dekoráciu pomocou .text-decoration-nonetriedy.

Nepodčiarknutý odkaz

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