Impariamo insieme come creare un footer fisso a fine pagina indipendentemente dal contenuto principale della pagina usando il framework Bootstrap 5.
In poche parole e con il codice strettamente necessario acquisterai una nuova conoscenza su come gestire il footer in qualsiasi progetto.
Considerando questo semplice codice di una pagina web usando Bootstrap 5, notiamo che il contenuto principale non riempie la pagina e di conseguenza il footer viene posto subito dopo il contenuto.
<!doctype html>
<html lang="it">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Bootstrap 5 - Footer</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<h1>Alessandro Manzoni - I promessi sposi (1840)</h1>
<h2>Capitolo 1</h2>
<p>Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interrotte di monti, tutto a seni e a golfi, a seconda dello sporgere e del rientrare di quelli, vien, quasi a un tratto, a ristringersi, e a prender corso e figura di fiume, tra un promontorio a destra, e un’ampia costiera dall’altra parte; e il ponte, che ivi congiunge le due rive, par che renda ancor più sensibile all’occhio questa trasformazione, e segni il punto in cui il lago cessa, e l’Adda rincomincia, per ripigliar poi nome di lago dove le rive, allontanandosi di nuovo, lascian l’acqua distendersi e rallentarsi in nuovi golfi e in nuovi seni. La costiera, formata dal deposito di tre grossi torrenti, scende appoggiata a due monti contigui, l’uno detto di san [p. 10]Martino, l’altro, con voce lombarda, il Resegone, dai molti suoi cocuzzoli in fila, che in vero lo fanno somigliare a una sega: talchè non è chi, al primo vederlo, purchè sia di fronte, come per esempio di su le mura di Milano che guardano a settentrione, non lo discerna tosto, a un tal contrassegno, in quella lunga e vasta giogaia, dagli altri monti di nome più oscuro e di forma più comune. </p>
</div>
</div>
</div>
<footer class="footer mt-auto py-3 bg-light">
<div class="container text-center">
<div class="row">
<div class="lead col-12">Alessandro Manzoni - I promessi sposi (1840)</div>
</div>
</div>
</footer>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
Per poter fissare il footer nella parte bassa della pagina è necessario aggiungere il seguente codice dentro il tag html e il tag body:
html: class=”h-100″
body: class=”d-flex flex-column h-100″
...
<html lang="it" class="h-100">
…
<body class="d-flex flex-column h-100">
…Il risultato sarà il seguente
Ricorda, sempre, che il codice del tag footer deve sempre stare fuori dal tag con la proprietà class=”container”.
Buon divertimento e alla prossima!