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.
Nejaký zástupný text na demonštráciu zarovnania textu do bloku. Urobíš pre mňa to isté? Je čas čeliť hudbe Už nie som tvoja múza. Počul som, že je to krásne, staň sa sudcom a moje dievčatá budú hlasovať. Cítim v sebe fénixa. Nebo žiarli na našu lásku, anjeli zhora plačú. Áno, privádzaš ma do utópie.
<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>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.
<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.
Veľký text.
<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 náš zásobník jednopriestorových písiem 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>