Testo
Documentazione e esempi di strumenti per il controllo dell’allineamento nelle aree di testo, dello stile del carattere e altro.
Allineamento del testo
Riallinea facilmente il contenuto dei componenti con le classi di allineamento testo.
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.
1
<p class="text-start">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 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.
1
2
3
4
5
6
7
8
<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-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>
Testo per esteso e overflow
Previeni l’andare a capo del testo con la classe .text-nowrap.
1
2
3
<div class="text-nowrap bd-highlight" style="width: 8rem;">
Questo testo oltrepassa il contenitore.
</div>
Per contenuti più lunghi puoi aggiungere la classe .text-truncate per troncare il testo con i punti di sospensione. Necessita della classe display: inline-block oppure display: block.
1
2
3
4
5
6
7
8
9
10
11
<!-- 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>
Trasformazione del testo
Trasforma il testo con una delle classi per la scrittura in maiuscolo.
Testo tutto minuscolo.
Testo tutto maiuscolo.
Testo con prime lettere MaiuscOLE.
1
2
3
<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>
Nota come la classe text-capitalize cambi solamente la prima lettera di ogni parola lasciando le altre inalterate.
Carattere grassetto e corsivo
Modifica rapidamente il testo in grassetto o in corsivo.
Testo in grassetto.
Testo in semi-grassetto.
Testo normale.
Testo sottile.
Testo in corsivo.
1
2
3
4
5
<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>
Monospace
Formatta il testo con carattere a larghezza costante con la classe .font-monospace.
Testo monospace
1
<p class="font-monospace">Testo monospace</p>