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.
Le classi text-start e text-end sostituiscono in Bootstrap5 le classi text-lefte text-right. Lo stesso vale per le varianti delle classi per viewport specifiche es: text-sm-left
Il tema garantisce compatibilità all'indietro, renderizzando le vecchie classi - se ancora presenti nel markup - come le nuove.
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-start">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-end">Testo allineato a destra per tutte le dimensioni del viewport.</p>
<p class="text-sm-start">Testo allineato a sinistra per dimensioni SM (small) o maggiori.</p>
<p class="text-md-end">Testo allineato a sinistra per dimensioni MD (medium) o maggiori.</p>
<p class="text-lg-start">Testo allineato a sinistra per dimensioni LG (large) o maggiori.</p>
<p class="text-xl-end">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 e corsivo
Testo in grassetto.
Testo in semi-grassetto.
Testo normale.
Testo sottile.
Testo in corsivo.
Le classi con prefisso fw sostituiscono in Bootstrap5 le classi con prefisso font-weight così come classi con prefisso fst sostituiscono font-italic e classi analoghe.
Il tema garantisce compatibilità all'indietro, renderizzando le vecchie classi - se ancora presenti nel markup - come le nuove.
<p class="fw-bold">Testo in grassetto.</p>
<p class="fw-semibold">Testo in semi-grassetto.</p>
<p class="fw-normal">Testo normale.</p>
<p class="fw-light">Testo sottile.</p>
<p class="fst-italic">Testo in corsivo.</p>Ridimensionamento del testo
Il tema implemlementa alcune classi aggiuntive rispetto a Bootstrap Italia per la gestione dell dimensiona del testo.
Le classi fs-small, fs-smaller e fs-mini sono dedicate ai testi di piccole dimensioni, imponendo loro una dimensione fissa di 14, 12 e 10 pixel.
Testo 14px
Testo 12px
Testo 10px
<p class="fs-small">Testo 14px</p>
<p class="fs-smaller">Testo 12px</p>
<p class="fs-mini">Testo 10px</p>Le classi fs-scale04, fs-scale06, fs-scale08 e fs-scale12 scalano invece la dimensione del testo in maniera relativa rispetto alla dimensione del testo del container, con un range dal 50% el 120%.
Testo 120%
Testo 100%
Testo 80%
Testo 60%
Testo 50%
<p class="fs-scale12">Testo 120%</p>
<p>Testo 100%</p>
<p class="fs-scale08">Testo 80%</p>
<p class="fs-scale06">Testo 60%</p>
<p class="fs-scale05">Testo 50%</p>