Skip to main content

Bootstrap Italia

Il tema Bootstrap 4 per lo sviluppo di applicazioni web per la PA

Bordi

Bordi

Modifica lo stile di bordi e il loro arrotondamento.

Aggiungi o rimuovi il bordo a un elemento. Puoi scegliere fra un bordo completo oppure un lato alla volta, secondo una logica aggiuntiva o sottrattiva.

Aggiuntivo

<span class="border"></span>
<span class="border-top"></span>
<span class="border-right"></span>
<span class="border-bottom"></span>
<span class="border-left"></span>

Sottrattivo

<span class="border-0"></span>
<span class="border-top-0"></span>
<span class="border-right-0"></span>
<span class="border-bottom-0"></span>
<span class="border-left-0"></span>

Colore dei bordi

Cambia il colore del bordo usando la palette del tema in uso.

<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-white"></span>

Bordi arrotondati

Tutte le classi per arrotondare facilmente gli angoli di un elemento.

Esempio di immagine arrotondata Esempio di immagine arrotondata in alto Esempio di immagine arrotondata a destra Esempio di immagine arrotondata in basso Esempio di immagine arrotondata a sinistra Esempio di immagine arrotondata a cerchio Esempio di immagine non arrotondata (sovrascrive l'eventuale arrotondamento applicato precedentemente) 
<img src="..." alt="..." class="rounded" />
<img src="..." alt="..." class="rounded-top" />
<img src="..." alt="..." class="rounded-right" />
<img src="..." alt="..." class="rounded-bottom" />
<img src="..." alt="..." class="rounded-left" />
<img src="..." alt="..." class="rounded-circle" />
<img src="..." alt="..." class="rounded-0" />