Bootstrap text, allineare il testo con Bootstrap, grassetto

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.

Banner Pubblicitario

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:

Banner pubblicitario

<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