Text

Dokumentace a příklady běžných textových nástrojů pro ovládání zarovnání, zalamování, váhy a další.

Zarovnání textu

Snadno znovu zarovnejte text ke komponentám pomocí tříd zarovnání textu.

Ambitioni desisse 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. Na 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>

Pro zarovnání vlevo, vpravo a na střed jsou k dispozici responzivní třídy, které používají stejné zarážky šířky výřezu jako systém mřížky.

Text zarovnaný doleva ve všech velikostech výřezu.

Text zarovnaný na střed ve všech velikostech výřezu.

Text zarovnaný doprava ve všech velikostech výřezu.

Text zarovnaný doleva ve výřezech velikosti SM (malé) nebo širší.

Text zarovnaný doleva ve výřezech velikosti MD (střední) nebo širší.

Text zarovnaný doleva ve výřezech velikosti LG (velké) nebo širší.

Text zarovnaný doleva ve výřezech velikosti XL (extra velké) nebo širší.

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

Zalamování a přetečení textu

Zabraňte zalamování textu pomocí .text-nowraptřídy.

Tento text by měl přetékat nadřazeného.

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

Pro delší obsah můžete přidat .text-truncatetřídu pro zkrácení textu pomocí elipsy. Vyžaduje display: inline-blocknebo 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>

Transformace textu

Transformujte text do komponent pomocí tříd psaní velkých písmen.

Text s malými písmeny.

Text velkými písmeny.

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

Všimněte si, jak text-capitalizese změní pouze první písmeno každého slova, přičemž velikost všech ostatních písmen zůstane nezměněna.

Tloušťka písma a kurzíva

Rychle změňte váhu (tučné) textu nebo text pište kurzívou.

Tučné písmo.

Text normální váhy.

Lehký text.

Text kurzívou.

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