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
Zalomiť text .text-wraptriedou.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Zabráňte zalomeniu textu s .text-nowraptriedou.
<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.
<!-- 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>Slovo zlom
Zabráňte tomu, aby dlhé reťazce textu narušili rozloženie vašich komponentov pomocou tlačidiel .text-breakna nastavenie word-wrap: break-worda word-break: break-word. Na širšiu podporu prehliadačov používame word-wrapnamiesto bežnejších a pridávame zastarané , aby sme sa vyhli problémom s flexibilnými kontajnermi.overflow-wrapword-break: break-word
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>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.
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.
<a href="#" class="text-decoration-none">Non-underlined link</a>