Bootstrap によるレスポンシブ Web デザイン
Sticky Footer を設定する
フッターを設置する
ページにフッターを設置したとき，もしもコンテンツ全体の高さが十分になければフッターの下部に余白が生じてしまいます．例えば次のようなページを作成してみます．（サンプル(1)を見る）．具体的には，<body> 要素内に <header>，<main>，<footer> という子要素を配置しています．なお，フッターの設置についてはこちらを参照してください．
index.html（抜粋）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<header class="container-fluid">
<p>
ここはナビゲーションメニューを表示するためのヘッダーです．．．
</p>
</header>
<main class="container-md">
<h1>Bootstrapのサンプル</h1>
<p>
ここは本文の領域です．レイアウトを確認するための文章です．．．
</p>
</main>
<footer class="container-fluid">
<p>
ここはフッター領域です．．．
</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
Sticky Footer を設定する
もしも，フッター下部に余白が生じないように，フッターが画面の最下部に表示したいということであれば，いわゆる Sticky Footer を設定すると良いでしょう．コンテンツの高さが十分にない場合（サンプル(2)を見る）はフッターが最下部に固定され，コンテンツの高さが十分にある場合には（サンプル(3)を見る）フッター固定されず画面のスクロールによって表示されるようになります．
これを実現するには次のとおり <body> タグと <footer> タグにいくつかのクラスを設定します．
index.html（抜粋）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body class="d-flex flex-column min-vh-100">
<header class="container-fluid">
<p>
ここはナビゲーションメニューを表示するためのヘッダーです．．．
</p>
</header>
<main class="container-md">
<h1>Bootstrapのサンプル</h1>
<p>
<code>.container-md</code>
</p>
<p>
ここは本文の領域です．レイアウトを確認するための文章です．．．
</p>
</main>
<footer class="container-fluid mt-auto">
<p>
ここはフッター領域です．．．
</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
なお，<body class="d-flex flex-column min-vh-100"> に指定された3つのクラスはそれぞれ役割が異なり，これらを組み合わせた初めて意味を持ちます．まず，d-flex はこの要素を Flexbox コンテナにするという指定です．これにより，<body> 直下の子要素 (<header>，<main>，<footer>) が Flex アイテム になるため，これら子要素の並び方向（縦／横），余白の配分，要素どうしの間隔，どこまで伸びるか／縮むかを決定することになります．
次のflex-column は Flexbox の並び方向を縦方向 (column) にする指定です．さらに，min-vh-100 では，要素の最小の高さを画面高 (viewpoint height) の 100% にしています．これにより，コンテンツが少ない場合は最低でも画面高まで広がり，コンテンツが多い場合は必要に応じてそれ以上に伸びるという挙動になります．
最後に，<footer class="mt-auto"> (= footer {margin-top: auto;}) によって，余った縦方向のスペースを全部フッターの上部に押し込む挙動になります．