Bootstrap text — CodingCreativo

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.

Da zero ad eroe

Entra nel mondo della programmazione web: variabili, funzioni, array, DOM, eventi. Con esercizi pratici e progetti coinvolgenti.

8 ore di corso registrato
Più di 50 algoritmi risolti passo passo
Livello base — da zero ad eroe
100% online, fruibile quando vuoi

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.

Lezione precedente: come usare i colori in Bootstrap

Lezione successiva: utilizzare le liste in Bootstrap