Vai al contenuto principale

Bootstrap Italia

Il tema Bootstrap 5 per lo sviluppo di applicazioni web per la PA
Cerca nella documentazione

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

1
2
3
4
5

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

Sottrattivo

1
2
3
4
5

<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

Cambia il colore del bordo scegliendo dalla palette del tema utilizzato.

1
2
3
4
5
6

<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

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) Esempio di immagine arrotondata a pillola 

1
2
3
4
5
6
7
8

  <img src="https://placehold.co/75x75/ebebeb/808080/?text=Immagine" class="rounded" alt="Esempio di immagine arrotondata">
  <img src="https://placehold.co/75x75/ebebeb/808080/?text=Immagine" class="rounded-top" alt="Esempio di immagine arrotondata in alto">
  <img src="https://placehold.co/75x75/ebebeb/808080/?text=Immagine" class="rounded-end" alt="Esempio di immagine arrotondata a destra">
  <img src="https://placehold.co/75x75/ebebeb/808080/?text=Immagine" class="rounded-bottom" alt="Esempio di immagine arrotondata in basso">
  <img src="https://placehold.co/75x75/ebebeb/808080/?text=Immagine" class="rounded-start" alt="Esempio di immagine arrotondata a sinistra">
  <img src="https://placehold.co/75x75/ebebeb/808080/?text=Immagine" class="rounded-circle" alt="Esempio di immagine arrotondata a cerchio">
  <img src="https://placehold.co/75x75/ebebeb/808080/?text=Immagine" class="rounded-0" alt="Esempio di immagine non arrotondata (sovrascrive l'eventuale arrotondamento applicato precedentemente)">
  <img src="https://placehold.co/150x75/ebebeb/808080/?text=Immagine" class="rounded-pill" alt="Esempio di immagine arrotondata a pillola">