Margin, padding e borders in Bootstrap

Indice dei contenuti

In questo articolo del corso Bootstrap imparerai a gestire il posizionamento degli elementi con gli attributi margin, padding e a creare bordi personalizzati.

Attraverso questa guida sarà possibile capire meglio il funzionamento di molte classi in Bootstrap e ad avere il pieno controllo sul posizionamento degli oggetti HTML.

Se non hai ben chiaro qualche concetto o non sai come si usa Bootstrap, segui il nostro corso gratuito dall’inizio. Consulta il programma qui.

Spaziatura in Bootstrap

Margin e padding nel CSS sono gli attributi generici per la spaziatura e il posizionamento degli elementi HTML. Con questi è possibile infatti gestire gli spazi e posizionare in modo accurato qualunque cosa, che sia un paragrafo, un titolo, un div e molto altro.

In Bootstrap è possibile ottenere gli stessi risultati, ma in maniera più efficiente, con le classi CSS preimpostate. Sia per “margin” che per “padding” esistono classi differenti ma molto simili tra loro, dunque facili da ricordare e da utilizzare in fase di progettazione.

La struttura di base di ognuna di queste classi CSS è {proprietà}{lato}-{display}-{valore}, e va composta in base alle proprie preferente e necessità.

In dettaglio, in {proprietà} troviamo:

m – margin;
p – padding;

In {lato} troviamo:

t – top (lato alto dell’elemento);
b – bottom (basso);
l – left (sinistro);
r – right (destro);
x – asse x (sinistro + destro);
y – asse y (alto + basso);
-vuoto- – tutti i lati.

In {display} troviamo:

-vuoto- per display “xs“;
sm
md
lg
xl

Leggi l’articolo dedicato al layout con Bootstrap per saperne di più sui display.

Infine, in {valore}:

0 – nessun margine o padding;
1 – spaziatura predefinita moltiplicata per 0.25;
2 – spaziatura predefinita moltiplicata per 0.5;
3 – spaziatura predefinita (* 1);
4 – spaziatura predefinita moltiplicata per 1.5;
5 – spaziatura predefinita moltiplicata per 3;
auto – imposta un margine automatico, valido solo per i margini.

Dunque, considerando questi parametri, puoi facilmente capire come costruire una classe CSS per la spaziatura, per margin o padding.

Ad esempio: .mt-5; .mx-auto; .pl-md-2; .p-lg-5; .pb-1 etc…

Centrare orizzontalmente un elemento

In HTML capita spesso di dover centrare orizzontalmente un elemento, un div o un paragrafo che sia, rispetto al suo contenitore, e in differenti casi si fa fatica a farlo con le comuni regole CSS.

In Bootstrap si può allineare e centrare un oggetto molto più facilmente e senza mettere mano allo stile, semplicemente con le classi viste nel paragrafo precedente. Per la precisione quella che ci viene in aiuto è “.mx-auto“, utilizzata in questo modo:

<div class="mx-auto" style="width:200px; background-color:lightgreen; text-align:center;">
  Ciao Mondo!
</div>

Lo stile CSS scritto è per aiutare a visualizzare meglio l’elemento nella pagina web.

Borders

Molte altre proprietà piuttosto utilizzate in HTML e CSS riguardano i bordi degli elementi. I bordi migliorano graficamente gli oggetti, li rendono più facili da individuare e arricchiscono il design della pagina web.

In CSS ci sono molti modi per personalizzare i bordi (borders), e in Bootstrap sono racchiusi in classi specifiche, che come sempre in questo corso, elencheremo qui in basso:

.border (4 bordi)
.border-top
.border-bottom
.border-left
.border-right

Con questi primi parametri sarà possibile impostare i bordi predefiniti di Bootstrap.

Nel caso in cui si abbia bisogno di rimuovere uno specifico bordo, basterà aggiungere “-0” alla fine.

.border-0 (nessun bordo)
.border-top-0 (senza bordo superiore)
.border-bottom-0 (senza bordo inferiore)
.border-left-0 (senza bordo sinistro)
.border-right-0 (senza bordo destro)

Bordi colorati

I bordi degli elementi possono avere colori differenti da quello predefinito dal sistema. Questo ovviamente può essere fatto manualmente scrivendo le proprie regole CSS, ma sono presenti anche classi dedicate per allo scopo.

Le colorazioni presenti nel Framework sono sempre quelle che abbiamo visto anche nei precedenti articoli, primary, secondary, info, success, warning, danger, light, dark e white, e vanno scritti in questo modo:

<span class="border border-primary"></span>
<span class="border-top border-secondary"></span>
<span class="border-left border-dark"></span>
<span class="border-bottom-0 border-danger"></span>

Bordi arrotondati

border-radius è l’attributo CSS utilizzato per arrotondare i bordi di un elemento di una pagina HTML. Come sempre, Bootstrap ci semplifica con le proprie classi dedicate all’arrotondamento dei bordi e angoli.