Lezione 2 - La Componente Css

Possiamo suddividere Bootstrap in 3 componenti principali: Css, Javascript, Components.

In questa lezione cominciamo ad analizzare la componente Css.

Bootstrap contiene moltissimi stili predefiniti per numerosi elementi html e per numerosissime classi, questo ci permette di trovarci con gran parte degli elementi già stilati graficamente, a noi basterà solo conoscere i nomi e il funzionamento delle classi di nostro interesse.

Iniziamo ad analizzare le classi che stilano la parte tipografica.

Classi di allineamento

Le prime classi di Bootstrap che andiamo a scoprire sono quelle testuali e partiamo da quelle di allineamento.

Se vogliamo allineare il testo a destra, sinistra, centrarlo oppure giustificarlo basta aggiungere la classe di nostro interesse per ottenere il risultato desiderato, vediamo come:

<p class="text-left">Testo allineato a sinistra!</p>
<p class="text-right">Testo allineato a destra!</p>
<p class="text-center">Testo allineato centrato!</p>
<p class="text-justify">Testo giustificato!</p>
<p class="text-nowrap">Testo tutto in una riga!</p>

il risultato sarà il seguente:

Testo allineato a sinistra!
Testo allineato a destra!
Testo allineato centrato!
Testo giustificato!
Testo tutto in una riga!

Classi text-transformation

La stessa cosa vale per trasformare il testo:

<p class="text-lowercase">Testo minuscolo!</p>
<p class="text-uppercase">Testo maiuscolo!</p>
<p class="text-capitalize">Testo con iniziale maiuscola!</p>

Il risultato sarà il seguente:

Testo minuscolo!
Testo maiuscolo!
Testo con iniziale maiuscola!