Classi di uso comune in Bootstrap

Un simpatico repertorio di classi utili per personalizzare l’aspetto e il layout degli elementi in una pagina web con Bootstrap

Classi per i bordi

border: Aggiunge un bordo a tutti i lati dell'elemento con lo stile di default.
border-top: Aggiunge un bordo solo nella parte superiore dell'elemento.
border-bottom: Aggiunge un bordo solo nella parte inferiore dell'elemento.
border-left: Aggiunge un bordo solo nel lato sinistro dell'elemento.
border-right: Aggiunge un bordo solo nel lato destro dell'elemento.
border-0: Rimuove tutti i bordi dall'elemento.
border-primary, border-secondary, border-success, border-danger, border-warning, border-info, border-light, border-dark, border-white: Aggiunge un bordo con il colore specificato dalla classe.

Classi per il float in Bootstrap

.float-left: Utilizzata per floatare un elemento a sinistra all'interno del suo contenitore.
.float-right: Utilizzata per floatare un elemento a destra all'interno del suo contenitore.
.float-none: Utilizzata per rimuovere qualsiasi float applicato all'elemento.
.clearfix: Utilizzata per "pulire" il float e ripristinare il layout normale degli elementi successivi all'interno dello stesso contenitore.

Classi Bootstrap per gli sfondi

In Bootstrap, puoi utilizzare diverse classi per gestire gli sfondi degli elementi. Di seguito, elenco alcune delle classi più comuni per gli sfondi in Bootstrap:
.bg-primary: Imposta lo sfondo con il colore primario definito dal tema di Bootstrap.
.bg-secondary: Imposta lo sfondo con il colore secondario definito dal tema di Bootstrap.
.bg-success: Imposta lo sfondo con il colore di successo (verde) definito dal tema di Bootstrap.
.bg-info: Imposta lo sfondo con il colore informativo (azzurro) definito dal tema di Bootstrap.
.bg-warning: Imposta lo sfondo con il colore di avviso (giallo) definito dal tema di Bootstrap.
.bg-danger: Imposta lo sfondo con il colore di errore (rosso) definito dal tema di Bootstrap. .bg-light: Imposta lo sfondo con un colore chiaro (grigio chiaro) definito dal tema di Bootstrap.
.bg-dark: Imposta lo sfondo con un colore scuro (grigio scuro) definito dal tema di Bootstrap.
.bg-white: Imposta lo sfondo con il colore bianco.
.bg-transparent: Imposta lo sfondo come trasparente, senza colore di sfondo.

Classi di margini in Bootstrap

Esistono classi di margini per gestire gli spazi tra gli elementi. Le classi di margini in Bootstrap sono basate su un sistema di griglia con uno schema a 12 colonne e sono organizzate in base alla dimensione dello schermo (ad esempio, per dispositivi desktop, tablet e dispositivi mobili).
Ecco alcuni esempi delle classi di margini di Bootstrap:

  • m-1, m-2, ... m-5: Aggiunge un margine esterno da 0.25rem a 3rem, aumentando gradualmente.
  • mt-1, mt-2, ... mt-5: Aggiunge un margine superiore da 0.25rem a 3rem, aumentando gradualmente.
  • mb-1, mb-2, ... mb-5: Aggiunge un margine inferiore da 0.25rem a 3rem, aumentando gradualmente.
  • ml-1, ml-2, ... ml-5: Aggiunge un margine sinistro da 0.25rem a 3rem, aumentando gradualmente. mr-1, mr-2, ... mr-5: Aggiunge un margine destro da 0.25rem a 3rem, aumentando gradualmente.
  • mx-1, mx-2, ... mx-5: Aggiunge un margine orizzontale (sinistro e destro) da 0.25rem a 3rem, aumentando gradualmente.
  • my-1, my-2, ... my-5: Aggiunge un margine verticale (superiore e inferiore) da 0.25rem a 3rem, aumentando gradualmente.