Introduzione
Spesso quando si lavora ad un sito web progettato con Bootstrap, accade che il footer non rimanga in fondo alle pagine in cui c'è poco contenuto, apparendo come "a mezz'aria". Ovviamente questo fornisce al sito in questione un aspetto brutto e poco professionale. La buona notizia è che risolvere questo problema è veramente semplice!
Ecco cosa devi fare per far sì che il footer rimanga in fondo alla pagina quando non c'è abbastanza contenuto per spingerlo verso il basso. Si tenga presente che non sto facendo riferimento a rendere il footer fisso o appiccicoso, quest'ultima è una cosa ancora diversa.
Step 1 - Aggiungere le classi al Body
Per prima cosa andiamo ad aggiungi le seguenti classi Bootstrap nel tag <body> o in un wrapper:
d-flex flex-column min-vh-100Per la scrittura di questo articolo sto usando Bootstrap 5, ma probabilmente funzionano correttamente da quando Bootstrap ha aggiunto il flexbox nella versione 4.
Quindi, il tag <body> dovrebbe apparire così.
<body class="d-flex flex-column min-vh-100">Con queste classi stiamo rendendo flessibile, con il contenuto in colonne, dall'alto verso il basso e con un'altezza minima del 100vh, il che significa che l'elemento sarà pari al 100% dell'altezza della viewport.
Step 2 - Aggiungere le classi al Footer
Aggiungi la classe mt-auto al <footer> o al wrapper del footer nel caso fosse utilizzato.
<footer class="mt-auto">La classe mt-auto andrà a impostare il margine superiore in CSS ad auto, ovvero automatico, ed è questo che alla fine spinge il footer in fondo alla pagina.
È tutto! Ora il fastidioso footer conosce il suo posto.
Conclusione
Se il design va a rotoli normalmente, dopo l'implementazione di questo codice, non dovrebbe succedere nulla di sbagliato se tutto il resto è fatto correttamente.