Testo
Documentazione e esempi per il controllo dell’allineamento nelle aree di testo, dello stile del carattere e altro.
Allineamento del testo
Per l’allineamento a sinistra, a destra e centrale sono disponibili classi che si adattano in base alla griglia utilizzata.
Testo allineato a sinistra per tutte le dimensioni del viewport.
Testo allineato al centro per tutte le dimensioni del viewport.
Testo allineato a destra per tutte le dimensioni del viewport.
Testo allineato a sinistra per dimensioni SM (small) o maggiori.
Testo allineato a sinistra per dimensioni MD (medium) o maggiori.
Testo allineato a sinistra per dimensioni LG (large) o maggiori.
Testo allineato a sinistra per dimensioni XL (extra-large) o maggiori.
<p class="text-left">Testo allineato a sinistra per tutte le dimensioni del viewport.</p>
<p class="text-center">Testo allineato al centro per tutte le dimensioni del viewport.</p>
<p class="text-right">Testo allineato a destra per tutte le dimensioni del viewport.</p>
<p class="text-sm-left">Testo allineato a sinistra per dimensioni SM (small) o maggiori.</p>
<p class="text-md-left">Testo allineato a sinistra per dimensioni MD (medium) o maggiori.</p>
<p class="text-lg-left">Testo allineato a sinistra per dimensioni LG (large) o maggiori.</p>
<p class="text-xl-left">Testo allineato a sinistra per dimensioni XL (extra-large) o maggiori.</p>Trasformazione del testo
Trasforma il testo presente nei componenti con una delle classi per la scrittura.
Testo tutto minuscolo.
Testo tutto maiuscolo.
Testo con prime lettere MaiuscOLE.
<p class="text-lowercase">Testo tutto minuscolo.</p>
<p class="text-uppercase">Testo tutto maiuscolo.</p>
<p class="text-capitalize">Testo con prime lettere MaiuscOLE.</p>Grassetto, corsivo e monospace
Testo in grassetto.
Testo in semi-grassetto.
Testo normale.
Testo sottile.
Testo in corsivo.
Testo monospace
<p class="font-weight-bold">Testo in grassetto.</p>
<p class="font-weight-semibold">Testo in semi-grassetto.</p>
<p class="font-weight-normal">Testo normale.</p>
<p class="font-weight-light">Testo sottile.</p>
<p class="font-italic">Testo in corsivo.</p>
<p class="text-monospace">Testo monospace</p>