Testo
Documentazione ed esempi per le comuni utilità di testo per controllare l'allineamento, il wrapping, il peso e altro ancora.
Riallinea facilmente il testo ai componenti con le classi di allineamento del testo.
Ambizioni 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. A 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>Per l'allineamento a sinistra, a destra e al centro, sono disponibili classi reattive che utilizzano gli stessi punti di interruzione della larghezza della finestra del sistema griglia.
Testo allineato a sinistra su tutte le dimensioni della finestra.
Testo allineato al centro su tutte le dimensioni della finestra.
Testo allineato a destra su tutte le dimensioni della finestra.
Testo allineato a sinistra su finestre di dimensioni SM (piccole) o più larghe.
Testo allineato a sinistra su finestre di dimensioni MD (medie) o più larghe.
Testo allineato a sinistra su finestre di dimensioni LG (grande) o più larghe.
Testo allineato a sinistra su finestre di dimensioni XL (extra-large) o più larghe.
<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>Impedisci al testo di andare a capo con una .text-nowrapclasse.
<div class="text-nowrap" style="width: 8rem;">
This text should overflow the parent.
</div>Per contenuti più lunghi, puoi aggiungere una .text-truncateclasse per troncare il testo con i puntini di sospensione. Richiede display: inline-blocko 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>Trasforma il testo in componenti con classi di capitalizzazione del testo.
Testo minuscolo.
Testo maiuscolo.
testo maiuscolo.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>Nota come text-capitalizecambia solo la prima lettera di ogni parola, lasciando inalterato il caso di tutte le altre lettere.
Modifica rapidamente il peso (grassetto) del testo o metti in corsivo il testo.
Testo grassetto.
Testo di peso normale.
Testo leggero.
Testo in corsivo.
<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>