Testu
Documentazione è esempi per utilità di testu cumuni per cuntrullà l'allinjamentu, l'imballaggio, u pesu, è più.
Allineamentu di testu
Realignate facilmente u testu à i cumpunenti cù classi di allineamentu di testu.
Qualchì testu di piazzamentu per dimustrà l'allineamentu di testu ghjustificatu. Farai u listessu per mè ? Hè ora di affruntà a musica ùn sò più a to musa. Sentu chì hè bella, sia u ghjudice è e mo ragazze anu da piglià un votu. Sentu un fenice in mè. U celu hè ghjilosu di u nostru amore, l'anghjuli pienghjenu da sopra. Iè, mi porta à l'utopia.
<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>
Per l'allineamentu di a manca, di a diritta è di u centru, e classi rispunsevuli sò dispunibuli chì utilizanu i stessi punti di rottura di larghezza di vista cum'è u sistema di griglia.
Testu allinatu à manca nantu à tutte e dimensioni di vista.
Centra u testu allinatu nantu à tutte e dimensioni di vista.
Testu allinatu à destra nantu à tutte e dimensioni di vista.
Testu allinatu à manca nantu à i vetri di dimensione SM (picculu) o più largu.
Testu allinatu à manca nantu à i vetri di dimensione MD (mediu) o più largu.
Testu allinatu à manca nantu à i vetri di dimensioni LG (grande) o più largu.
Testu allinatu à manca nantu à i vetri di taglia XL (extra-large) o più largu.
<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>
Imballaggio di testu è overflow
Imbulighjate u testu cù una .text-wrap
classe.
<div class="badge badge-primary text-wrap" style="width: 6rem;">
This text should wrap.
</div>
Impedisce u testu di imballà cù una .text-nowrap
classe.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
This text should overflow the parent.
</div>
Per un cuntenutu più longu, pudete aghjunghje una .text-truncate
classa per truncà u testu cù un ellipsis. Richiede display: inline-block
o 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>
Pausa di parolla
Impedisce à longu stringhe di testu di rompe u layout di i vostri cumpunenti usendu .text-break
per stabilisce word-wrap: break-word
è word-break: break-word
. Utilizemu word-wrap
invece di u più cumuni overflow-wrap
per un supportu più largu di u navigatore, è aghjunghje u deprecated word-break: break-word
per evità prublemi cù cuntenituri flessibili.
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
Trasformazione di u testu
Trasfurmà u testu in cumpunenti cù classi di capitalizazione di testu.
Testu minuscule.
Testu in maiuscule.
Testu in majuscule.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>
Nota cumu .text-capitalize
cambia solu a prima lettera di ogni parolla, lascendu u casu di qualsiasi altre lettere micca affettatu.
Peso di font è italicu
Cambia rapidamente u pesu (audacia) di u testu o mette in corsu.
Testu in grassu.
Testu di pesu più grassu (relativu à l'elementu parent).
Testu di pesu normale.
Testu di pisu ligeru.
Testu di pesu più ligeru (relativu à l'elementu parent).
Testu italicu.
<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
Cambia una selezzione à a nostra pila di font monospace cù .text-monospace
.
Questu hè in monospace
<p class="text-monospace">This is in monospace</p>
Resetta u culore
Resettate un testu o un culore di ligame cù .text-reset
, in modu chì eredite u culore da u so parente.
Testu silenziu cù un ligame di reset .
<p class="text-muted">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
Decorazione di testu
Eliminate una decorazione di testu cù una .text-decoration-none
classa.
<a href="#" class="text-decoration-none">Non-underlined link</a>