Bootstrap text

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

1 – Introduzione a Bootstrap

2 – Creazione del primo template

3 – Come inserire una Navbar

4 – Personalizzare la posizione del menù

5 – Come utilizzare il grid system

6 – Bootstrap Container

7 – Inserire lo slideshow di immagini

8 – Come utilizzare le Bootstrap images

Autore dell'articolo: Cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *