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

Obtékání textu .text-wraptřídou.

Tento text by se měl zalomit.

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

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

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

<div class="text-nowrap bd-highlight" 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>

Přerušení slov

Zabraňte tomu, aby dlouhé řetězce textu narušily rozvržení vašich komponent pomocí .text-breaknastavení overflow-wrap: break-word(a word-break: break-wordpro kompatibilitu s IE a Edge).

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

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

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.

Tučná váha textu (vzhledem k nadřazenému prvku).

Text normální váhy.

Lehký text.

Lehčí text (vzhledem k nadřazenému prvku).

Text kurzívou.

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

Jednoprostorový

Změňte výběr na náš zásobník jednoprostorových písem pomocí .text-monospace.

Toto je v monospace

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

Obnovit barvu

Obnovte barvu textu nebo odkazu pomocí .text-reset, aby zdědil barvu od svého rodiče.

Ztlumený text s odkazem pro resetování .

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

Textová dekorace

Odstraňte ozdobu textu pomocí .text-decoration-nonetřídy.

Nepodtržený odkaz

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