Teksto
Dokumentado kaj ekzemploj por komunaj tekstaj utilecoj por kontroli vicigon, envolvadon, pezon kaj pli.
Teksta vicigo
Facile realigu tekston al komponentoj kun tekstaj vicigoklasoj.
Iu lokokupilo-teksto por pruvi pravigitan tekstan vicigon. Ĉu vi faros la samon por mi? Estas tempo alfronti la muzikon Mi ne plu estas via muzo. Aŭdis, ke ĝi estas bela, estu la juĝisto kaj miaj knabinoj voĉdonos. Mi povas senti fenikson ene de mi. La ĉielo ĵaluzas pri nia amo, anĝeloj ploras de supre. Jes, vi kondukas min al utopio.
<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>Por maldekstre, dekstre kaj centra vicigo, respondaj klasoj estas disponeblaj, kiuj uzas la samajn vidfenejlarĝajn rompopunktojn kiel la kradsistemo.
Maldekstre vicigita teksto sur ĉiuj grandoj de vidpunkto.
Centri vicigitan tekston sur ĉiuj grandoj de vidpunkto.
Dekstre vicigita teksto sur ĉiuj grandoj de vidpunkto.
Maldekstre vicigita teksto sur vidfenestroj grandeco SM (malgranda) aŭ pli larĝa.
Maldekstre vicigita teksto sur vidfenestroj grandeco MD (meza) aŭ pli larĝa.
Maldekstre vicigita teksto sur vidfenestroj grandeco LG (granda) aŭ pli larĝa.
Maldekstre vicigita teksto sur vidfenestroj grando XL (ekstregranda) aŭ pli larĝa.
<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>Teksto envolvado kaj superfluo
Envolvi tekston kun .text-wrapklaso.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Malhelpi tekston envolvi kun .text-nowrapklaso.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>Por pli longa enhavo, vi povas aldoni .text-truncateklason por detranĉi la tekston per elipso. Postulas display: inline-blockaŭ 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>Vortrompo
Malhelpu longajn tekstoĉenojn rompi la aranĝon de viaj komponantoj per uzado .text-breakde agordi word-wrap: break-wordkaj word-break: break-word. Ni uzas word-wrapanstataŭ la pli oftan overflow-wrappor pli larĝa retumila subteno, kaj aldonas la malrekomenditan word-break: break-wordpor eviti problemojn kun fleksaj ujoj.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>Teksto transformo
Transformu tekston en komponantojn kun klasoj de tekstaj majuskloj.
Minuskla teksto.
Majuskla teksto.
Majuskigita teksto.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>Notu kiel .text-capitalizenur ŝanĝas la unuan literon de ĉiu vorto, lasante la majuskon de iuj aliaj literoj netuŝita.
Tiparopezo kaj kursivo
Rapide ŝanĝu la pezon (aŭdaco) de teksto aŭ kursivigu tekston.
Grada teksto.
Pli grasa peza teksto (rilate al la gepatra elemento).
Normala peza teksto.
Malpeza teksto.
Pli malpeza teksto (rilate al la gepatra elemento).
Kursiva teksto.
<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>Monospaco
Ŝanĝu elekton al nia monospaca tiparstako per .text-monospace.
Ĉi tio estas en monospaco
<p class="text-monospace">This is in monospace</p>Restarigi koloron
Restarigu la koloron de teksto aŭ ligilo per .text-reset, tiel ke ĝi heredu la koloron de sia gepatro.
Silentita teksto kun rekomencigita ligilo .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>Teksta ornamado
Forigu tekstan ornamon kun .text-decoration-noneklaso.
<a href="#" class="text-decoration-none">Non-underlined link</a>