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
Mbështillni tekstin me një .text-wrapklasë.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>Parandaloni mbështjelljen e tekstit me një .text-nowrapklasë.
<div class="text-nowrap bd-highlight" 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.
<!-- 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>Thyerja e fjalëve
Parandaloni vargjet e gjata të tekstit që të prishin paraqitjen e komponentëve tuaj duke përdorur .text-breakpër të vendosur overflow-wrap: break-word(dhe word-break: break-wordpër pajtueshmërinë me IE & Edge).
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>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ë më të theksuar (në lidhje me elementin mëmë).
Teksti me peshë normale.
Tekst me peshë të lehtë.
Tekst me peshë më të lehtë (në raport me elementin prind).
Teksti kursive.
<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>Monohapësirë
Ndryshoni një përzgjedhje në grumbullin tonë të shkronjave monospace me .text-monospace.
Kjo është në monospace
<p class="text-monospace">This is in monospace</p>Rivendos ngjyrën
Rivendosni ngjyrën e një teksti ose lidhjeje me .text-reset, në mënyrë që të trashëgojë ngjyrën nga prindi i tij.
Teksti i heshtur me një lidhje të rivendosur .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>Dekorimi i tekstit
Hiqni një dekorim teksti me një .text-decoration-noneklasë.
<a href="#" class="text-decoration-none">Non-underlined link</a>