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.

Nějaký zástupný text pro demonstraci zarovnání textu do bloku. Uděláš pro mě to samé? Je čas čelit hudbě Už nejsem tvoje múza. Slyšel jsem, že je to krásné, staň se soudcem a moje dívky budou hlasovat. Cítím v sobě fénixe. Nebe žárlí na naši lásku, andělé shůry pláčou. Jo, bereš mě do utopie.

<p class="text-justify">Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</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í word-wrap: break-worda word-break: break-word. Používáme word-wrapmísto běžnějších overflow-wrappro širší podporu prohlížečů a přidáváme zastaralé word-break: break-word, abychom se vyhnuli problémům s flex kontejnery.

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>