Colori

Una serie di classi di utilità per applicare colori a testi e sfondi.

Bootstrap Italia eredita gli stessi meccanismi per la gestione dei colori di Bootstrap 5.2.3, dove i colori del tema sono descritti attraverso una variabile Sass nominata $theme-colors.

La principale novità introdotta da Bootstrap Italia è una serie di varianti della tonalità primaria primary basate sullo spazio colore HSB (coincidente con il modello HSV).

Questo permette di avere a disposizione 16 diverse varianti “monocromatiche” (in quanto hue e, in gran parte anche saturation rimangono invariate) che, essendo aggiunte alla lista di $theme-colors, sono disponibili per tutti quei componenti ed utilità che ne fanno uso, come ad esempio .text- e .bg-*.

Puoi trovare maggiori informazioni sulla palette di colori a disposizione alla pagina Colori Custom.

Colore del testo

1
2
3
4
5
6
7
8
9
<p class="p-3 mb-2 text-primary">.text-primary</p>
<p class="p-3 mb-2 text-secondary">.text-secondary</p>
<p class="p-3 mb-2 text-success">.text-success</p>
<p class="p-3 mb-2 text-danger">.text-danger</p>
<p class="p-3 mb-2 text-warning">.text-warning</p>

<p class="p-3 mb-2 text-muted">.text-muted</p>

<p class="p-3 mb-2 text-white bg-dark">.text-white</p>

Colore di sfondo

Allo stesso modo di quanto avviene per il testo, le classi bg-* permettono di colorare lo sfondo di un elemento; le classi per gli sfondi non hanno alcun impatto sulla proprietà color, per cui in alcuni casi sarà necessario affiancarle alle classi .text-*.

1
2
3
4
5
6
7
8
9
10
11
<div class="p-3 mb-2 bg-primary  text-white ">.bg-primary</div>

<div class="p-3 mb-2 bg-secondary  text-white ">.bg-secondary</div>

<div class="p-3 mb-2 bg-success ">.bg-success</div>

<div class="p-3 mb-2 bg-danger  text-white ">.bg-danger</div>

<div class="p-3 mb-2 bg-warning ">.bg-warning</div>

<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>

</div>

Colore di sfondo con gradiente

Bootstrap Italia eredita da Bootstrap la possibilità di avere sfondi con gradiente. Tale funzionalità non è però attiva, e va esplicitamente impostata attraverso la variabile SASS $enable-gradients, e ricompilando i file sorgente.

Si possono trovare maggiori informazioni a riguardo sul sito di Bootstrap.