Source

Teksti

Dokumentacioni dhe shembuj për mjetet e zakonshme të tekstit për të kontrolluar shtrirjen, mbështjelljen, peshën dhe më shumë.

Rreshtimi i tekstit

Rivendosni lehtësisht tekstin me komponentët me klasa të shtrirjes së tekstit.

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

Për shtrirjen majtas, djathtas dhe qendrës, ofrohen klasa të përgjegjshme që përdorin të njëjtat pika të gjerësisë së pamjes si sistemi i rrjetit.

Teksti i rreshtuar majtas në të gjitha madhësitë e portave të pamjes.

Teksti i përafruar në qendër në të gjitha madhësitë e portave të pamjes.

Teksti i rreshtuar djathtas në të gjitha madhësitë e portave të pamjes.

Teksti i rreshtuar majtas në portat e pamjes me madhësi SM (të vogla) ose më të gjera.

Teksti i rreshtuar majtas në portat e pamjes me madhësi MD (mesatare) ose më të gjerë.

Teksti i rreshtuar majtas në portat e shikimit me madhësi LG (i madh) ose më i gjerë.

Teksti i rreshtuar majtas në portat e pamjes me madhësi XL (ekstra i madh) ose më i gjerë.

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

Mbështjellja dhe tejmbushja e tekstit

Parandaloni mbështjelljen e tekstit me një .text-nowrapklasë.

Ky tekst duhet të vërshojë prindin.
<div class="text-nowrap" style="width: 8rem;">
  This text should overflow the parent.
</div>

Për përmbajtje më të gjatë, mund të shtoni një .text-truncateklasë për të shkurtuar tekstin me një elipsë. Kërkon display: inline-blockose display: block.

Praeterea iter est quasdam res quas ex communi.
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>

Transformimi i tekstit

Transformoni tekstin në komponentë me klasa të shkronjave të mëdha të tekstit.

Tekst me shkronja të vogla.

Teksti me shkronja të mëdha.

Teksti me shkronja kapitale.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

Vini re se si text-capitalizendryshon vetëm shkronjën e parë të secilës fjalë, duke lënë të paprekur rastin e shkronjave të tjera.

Pesha e shkronjave dhe shkronjat e pjerrëta

Ndryshoni shpejt peshën (guxim) të tekstit ose bëni pjerrësi të tekstit.

Tekst i trashë.

Teksti me peshë normale.

Tekst me peshë të lehtë.

Teksti kursive.

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