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.

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 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>

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.

To besedilo bi moralo prelomiti.

<div class="badge badge-primary text-wrap" style="width: 6rem;">
  This text should wrap.
</div>

Preprečite prelivanje besedila z .text-nowraprazredom.

To besedilo bi moralo presegati nadrejeno.

<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.

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>

Prelom besed

Preprečite, da bi dolgi nizi besedila porušili postavitev vaših komponent, tako da uporabite .text-breakza nastavitev overflow-wrap: break-word(in word-break: break-wordza združljivost IE in Edge).

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.

<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.

Nepodčrtana povezava

<a href="#" class="text-decoration-none">Non-underlined link</a>