Shop IT

Colori del tema

Ecco la palette cromatica del tuo sito. Come puoi vedere, ogni colore è identificato da un nome. Questo nome viene ripetuto in tutte le classi che servono a "colorare" un elemento (ad esempio un testo colorato, un link colorato, uno sfondo colorato ecc.). Ti consigliamo di "muoverti" all'interno di questa tavolozza, per mantenere coerenza visiva e consistenza nel design del tuo sito.

Primary

Secondary

Success

Danger

Warning

Info

Light

Dark

Sfondo

Aggiungendo una o più delle seguenti classi, puoi modificare il colore di sfondo di un intero widget o di un singolo elemento all'interno del widget. Puoi anche aggiungere un gradiente o un'ombra.

Colore dello sfondo

bg-primary

bg-secondary

bg-success

bg-danger

bg-warning

bg-info

bg-light

bg-dark

bg-body

bg-white

bg-transparent


<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 text-white">bg-success</div>
<div class="p-3 mb-2 bg-danger text-white">bg-danger</div>
<div class="p-3 mb-2 bg-warning text-dark">bg-warning</div>
<div class="p-3 mb-2 bg-info text-dark">bg-info</div>
<div class="p-3 mb-2 bg-light text-dark">bg-light</div>
<div class="p-3 mb-2 bg-dark text-white">bg-dark</div>
<div class="p-3 mb-2 bg-body text-dark">bg-body</div>
<div class="p-3 mb-2 bg-white text-dark">bg-white</div>
<div class="p-3 mb-2 bg-transparent text-dark">bg-transparent</div>

Gradiente dello sfondo

bg-gradient
bg-primary

bg-gradient
bg-secondary

bg-gradient
bg-success

bg-gradient
bg-danger

bg-gradient
bg-warning

bg-gradient
bg-info

bg-gradient
bg-light

bg-gradient
bg-dark

bg-gradient
bg-body

bg-gradient
bg-white

bg-gradient
bg-transparent

Sfondo degli avvisi

alert
alert-primary

alert
alert-secondary

alert
alert-success

alert
alert-danger

alert
alert-warning

alert
alert-info

alert
alert-light

alert
alert-dark

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>

Ombre

shadow-none

shadow-sm

shadow

shadow-lg


<div class="shadow-none p-3 mb-5 bg-light rounded">shadow-none</div>
<div class="shadow-sm p-3 mb-5 bg-body rounded">shadow-sm</div>
<div class="shadow p-3 mb-5 bg-body rounded">shadow</div>
<div class="shadow-lg p-3 mb-5 bg-body rounded">shadow-lg</div>

Bordi

Potresti avere la necessità di modificare lo stile di un bordo (con un colore o uno spessore diverso) o rimuovere uno o più bordi da un oggetto. Le seguenti classi servono per aggiungere/rimuovere un bordo da uno o più lati e a modificarne il colore e lo spessore.

Aggiungere un bordo

border
(Aggiunge un bordo a tutti i lati) border-top
(Aggiunge un bordo in alto) border-end
(Aggiunge un bordo al lato destro) border-bottom
(Aggiunge un bordo in basso) border-start
(Aggiunge un bordo al lato sinistro)

<span class="border"></span>
<span class="border-top"></span>
<span class="border-end"></span>
<span class="border-bottom"></span>
<span class="border-start"></span>

Rimuovi il bordo

Queste classi vengono utilizzate per rimuovere il bordo da uno o più lati di un oggetto.

border-0
(Rimuove il bordo da tutti e quattro i lati dell'oggetto) border-top-0
(Rimuove il bordo solo dall'alto) border-end-0
(Rimuove il bordo solo dal lato destro) border-bottom-0
(Rimuove il bordo solo dal basso) border-start-0
(Rimuove il bordo solo dal lato sinistro)

<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-end-0"></span>
<span class="border-bottom-0"></span>
<span class="border-start-0"></span>

Colore dei bordi

border
border-primary border
border-secondary border
border-success border
border-danger border
border-warning

border
border-info border
border-light border
border-dark border
border-white

<span class="border border-primary"></span>
<span class="border border-secondary"></span>
<span class="border border-success"></span>
<span class="border border-danger"></span>
<span class="border border-warning"></span>
<span class="border border-info"></span>
<span class="border border-light"></span>
<span class="border border-dark"></span>
<span class="border border-white"></span>

Spessore del bordo

border
border-1 border
border-2 border
border-3 border
border-4 border
border-5

<span class="border border-1"></span>
<span class="border border-2"></span>
<span class="border border-3"></span>
<span class="border border-4"></span>
<span class="border border-5"></span>

Tipografia

Alcuni widget supportano un editor di testo che consente di formattare il testo aggiungendo elementi di stile (allineamento, grassetto, corsivo, ecc.). In altri casi, invece, il testo viene semplicemente inserito in un campo input, senza possibilità di stilare il contenuto. Utilizzando le classi che seguono, puoi aggiungere elementi di stile per aumentare la dimensione del carattere, modificarne l'allineamento, lo spessore e il colore.

Dimensione del font

Usa queste classi per aumentare la dimensione di un testo semplice (ad esempio un paragrafo)

fs-1

fs-2

fs-3

fs-4

fs-5

fs-6

<p class="fs-1">.fs-1 text</p>
<p class="fs-2">.fs-2 text</p>
<p class="fs-3">.fs-3 text</p>
<p class="fs-4">.fs-4 text</p>
<p class="fs-5">.fs-5 text</p>
<p class="fs-6">.fs-6 text</p>

Dimensione dei titoli

Usa queste classi per aumentare la dimensione di un titolo (h1/h2/h3/h4/h5)

display-1

display-2

display-3

display-4

display-5

display-6


        <h1 class="display-1">Display 1</h1>
        <h1 class="display-2">Display 2</h1>
        <h1 class="display-3">Display 3</h1>
        <h1 class="display-4">Display 4</h1>
        <h1 class="display-5">Display 5</h1>
        <h1 class="display-6">Display 6</h1>

Allineamento del testo

text-start Testo allineato a sinistra

text-center Testo allineato al centro

text-end (Testo allineato a destra)


<p class="text-start">Testo allineato a sinistra</p>
<p class="text-center">Testo allineato al centro</p>
<p class="text-end">Testo allineato a destra</p>

Trasformazione del testo

text-lowercase (Testo in minuscolo)

text-uppercase (Testo in maiuscolo)

text-capitalize (Testo Con Iniziali Maiuscole)

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">CapiTaliZed text.</p>

Spessore del font e corsivo

fw-bold - Testo in grassetto

fw-bolder - Testo più spesso (rispetto all'elemento padre).

fw-normal - Testo di peso normale.

fw-light - Testo sottile

fw-lighter - Testo più sottile (relativo all'elemento padre).

fst-italic - Testo in corsivo.

fst-normal - Testo con stile normale

<p class="fw-bold">Bold text.</p>
<p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
<p class="fw-normal">Normal weight text.</p>
<p class="fw-light">Light weight text.</p>
<p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>

Colori del testo

text-primary

text-secondary

text-success

text-danger

text-warning

text-info

text-light

text-dark

text-body

text-muted

text-white

text-black-50

text-white-50

<p class="text-primary">.text-primary</p>

<p class="text-secondary">text-secondary</p>
<p class="text-success">text-success</p>
<p class="text-danger">text-danger</p>
<p class="text-warning bg-dark">text-warning</p>
<p class="text-info bg-dark">text-info</p>
<p class="text-light bg-dark">text-light</p>
<p class="text-dark">text-dark</p>
<p class="text-body">text-body</p>
<p class="text-muted">text-muted</p>
<p class="text-white bg-dark">text-white</p>
<p class="text-black-50">text-black-50</p>
<p class="text-white-50 bg-dark">text-white-50</p>

Colori dei link

Primary link Secondary link Success link Danger link Warning link Info link Light link Dark link

<a href="#" class="link-primary">Primary link</a>
<a href="#" class="link-secondary">Secondary link</a>
<a href="#" class="link-success">Success link</a>
<a href="#" class="link-danger">Danger link</a>
<a href="#" class="link-warning">Warning link</a>
<a href="#" class="link-info">Info link</a>
<a href="#" class="link-light">Light link</a>
<a href="#" class="link-dark">Dark link</a>

Spaziatura

Puoi aggiungere padding (spazio all'interno del widget) o margine (spazio all'esterno del widget) utilizzando la seguente denominazione: `{property}{sides}-{size}`

Dove "proprietà" è:

m - per le classi che impostano il Margine
p - per le classi che impostano il padding

Dove "lati" è uno di:

t - per le classi che impostano il margin-top oppure padding-top
b - per le classi che impostano il margin-bottom oppure padding-bottom
s - (inizio o sinistra) per le classi che impostanomargin-left oppure padding-left
e - (fine o destra) per le classi che impostano margin-right oppure padding-right
x - per le classi che impostano entrambi *-left e *-right
y - per le classi che impostano entrambi *-top e *-bottom
blank - for classes that set a margin oppure padding on all 4 sides of the element

Where size is one of:

0 - per le classi che eliminano il margin oppure padding impostandolo su 0
1 - (come impostazione predefinita) per le classi che impostano il margin oppure padding a $spacer * .25
2 - (come impostazione predefinita) per le classi che impostano il margin oppure padding a $spacer * .5
3 - (come impostazione predefinita) per le classi che impostano il margin oppure padding a $spacer
4 - (come impostazione predefinita) per le classi che impostano il margin oppure padding a $spacer * 1.5
5 - (come impostazione predefinita) per le classi che impostano il margin oppure padding a $spacer * 3
auto - for classes that set the margin to auto

#	Margin	Padding
Top	`mt-0mt-1mt-2mt-3mt-4mt-5`	`pt-0pt-1pt-2pt-3pt-4pt-5`
Bottom	`mb-0mb-1mb-2mb-3mb-4mb-5`	`pb-0pb-1pb-2pb-3pb-4pb-5`
Left / Start	`ms-0ms-1ms-2ms-3ms-4ms-5`	`ps-0ps-1ps-2ps-3ps-4ps-5`
Right / End	`me-0me-1me-2me-3me-4me-5`	`pe-0pe-1pe-2pe-3pe-4pe-5`
Top & bottom (Y axis)	`my-0my-1my-2my-3my-4my-5`	`py-0py-1py-2py-3py-4py-5`
Right & left (X axis)	`mx-0mx-1mx-2mx-3mx-4mx-5`	`px-0px-1px-2px-3px-4px-5`
Auto	`m-auto`	`p-auto`

Padding (imposta lo spazio all'interno di un oggetto)

p-1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

p-2
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

p-3
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

p-4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

p-5
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.