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

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>

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.

Normalna teža besedila.

Majhno besedilo.

Ležeče besedilo.

<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-weight-light">Light weight text.</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>