Besedilo
Dokumentacija in primeri za običajne pripomočke za besedilo za nadzor poravnave, ovijanja, teže in več.
Poravnava besedila
Preprosto ponovno poravnajte besedilo s komponentami z razredi za poravnavo besedila.
Nekaj nadomestnega besedila za prikaz poravnave poravnanega besedila. Ali boš naredil enako zame? Čas je, da se soočim z glasbo. Nisem več tvoja muza. Slišal sem, da je lepo, bodi sodnik in moja dekleta bodo glasovala. V sebi čutim feniksa. Nebesa so ljubosumna na našo ljubezen, angeli jočejo od zgoraj. Ja, popelješ me v utopijo.
<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>Za levo, desno in sredinsko poravnavo so na voljo odzivni razredi, ki uporabljajo iste prelomne točke širine vidnega polja kot sistem mreže.
Levo poravnano besedilo na vseh velikostih vidnih oken.
Sredinsko poravnano besedilo na vseh velikostih vidnega polja.
Desno poravnano besedilo na vseh velikostih vidnega polja.
Levo poravnano besedilo na pogledih velikosti SM (majhno) ali širše.
Levo poravnano besedilo na pogledih velikosti MD (srednje) ali širše.
Levo poravnano besedilo na pogledih velikosti LG (veliko) ali širše.
Levo poravnano besedilo na pogledih velikosti XL (zelo veliko) ali širše.
<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>Prelivanje in prelivanje besedila
Prelomi besedilo z .text-wraprazredom.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Preprečite prelivanje besedila z .text-nowraprazredom.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>Za daljšo vsebino lahko dodate .text-truncaterazred za prirezovanje besedila z elipso. Zahteva display: inline-blockoz 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>Prelom besed
Preprečite, da bi dolgi nizi besedila porušili postavitev vaših komponent, tako da uporabite .text-breakza nastavitev word-wrap: break-wordin word-break: break-word. word-wrapNamesto bolj običajnega uporabljamo za overflow-wrapširšo podporo brskalnika in dodajamo zastarelo word-break: break-word, da se izognemo težavam s vsebniki flex.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>Preoblikovanje besedila
Pretvorite besedilo v komponentah z razredi za uporabo velikih črk v besedilu.
Besedilo z malimi črkami.
Besedilo z velikimi črkami.
Besedilo z velikimi črkami.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>Upoštevajte, kako .text-capitalizese spremeni samo prva črka vsake besede, pri čemer velike in male črke drugih črk ostanejo nespremenjene.
Teža pisave in poševni tisk
Hitro spremenite težo (krepkost) besedila ali poševno besedilo.
Krepko besedilo.
Krepkejša teža besedila (glede na nadrejeni element).
Normalna teža besedila.
Majhno besedilo.
Lažje besedilo (glede na nadrejeni element).
Ležeče besedilo.
<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
Spremenite izbor v naš sklad enoprostornih pisav z .text-monospace.
To je v monoprostorju
<p class="text-monospace">This is in monospace</p>Ponastavi barvo
Ponastavite barvo besedila ali povezave z .text-reset, tako da podeduje barvo od starša.
Utišano besedilo s povezavo za ponastavitev .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>Dekoracija besedila
Odstranite besedilni okras z .text-decoration-nonerazredom.
<a href="#" class="text-decoration-none">Non-underlined link</a>