Bootstrap text – In questa lezione vedremo come personalizzare il testo in Bootstrap.
Nel precedente articolo abbiamo visto come utilizzare i colori con il testo, in questa lezione vedremo come allineare il testo, utilizzare il grassetto, il corsivo e come trasformare il testo in maiuscolo o minuscolo.
Bootstrap text – allineamento
Per allineare un paragrafo posso utilizzare text-left per allineare tutto il testo a sinistra, come nell’esempio sotto:
Paragrafo allineato a sinistra. Questa classe permette di effettuare un allineamento a sinistra e quindi a destra il testo non sarà perfettamente allineato. Questa scritta di esempio è stata inserita a scopo dimostrativo per mostrare l’effetto della classe sul paragrafo.
Oppure posso utilizzare text-right per allineare tutto il testo a destra, come in questo esempio:
Esempio di paragrafo allineato a destra. Questa classe permette di effettuare un allineamento a destra e quindi a sinitra il testo non sarà perfettamente allineato. Questa scritta di esempio è stata inserita a scopo dimostrativo per mostrare l’effetto della classe sul paragrafo.
L’ultima opzione è rendere il testo giustificato con text-justify, come nell’esempio sotto:
Esempio di paragrafo allineato giustificato. Questa classe permette di effettuare un allineamento a sinistra e a destra. Questa scritta di esempio è stata inserita a scopo dimostrativo per mostrare l’effetto della classe sul paragrafo.
Inoltre si può decidere di applicare l’allineamento anche solo per alcuni dispositivi, quindi ad esempio se utilizziamo text-md-left allineiamo il testo solo per i dispositivi di dimensioni medie e superiori. Cioè a partire dalla dimensione in pixel maggiore o uguale di 768px, come ad esempio i tablet, si avrà un allineamento a sinistra.
Bootstrap text – Grassetto e corsivo
In Bootstrap è semplicissimo applicare il grassetto, infatti basta indicare font-weight-bold, font-weight-light oppure font-weight-normal per ottenere l’effetto desiderato.
Mentre con font-italic applichiamo il corsivo.
Bootstrap text – Testo in maiuscolo
Il testo può essere anche trasformato in maiuscolo, in minuscolo o con le iniziali maiuscole.
Quindi se ad esempio utilizziamo il seguente codice:
<p class="text-uppercase">Blog sul coding</p>
<p class="text-lowercase">CODING CREATIVO</p>
<p class="text-capitalize">Imparare ad usare Bootstrap</p>Otterremo dunque questo risultato:
Blog sul coding
CODING CREATIVO
Imparare ad usare Bootstrap
Conclusioni
In questa lezione ‘Bootstrap text‘ abbiamo imparato ad allineare il testo, ad utilizzare il grassetto ed il corsivo, a trasformare un testo in maiuscolo o in minuscolo in maniera molto semplice.
Link utili
Indice argomenti tutorial Bootstrap
2 – Creazione del primo template
4 – Personalizzare la posizione del menù
5 – Come utilizzare il grid system
7 – Inserire lo slideshow di immagini
8 – Come utilizzare le Bootstrap images