Bootstrap5でヘッダーやフッターを固定する方法をサンプルコード付きで詳しく解説します。
Navbarコンポーネントを常に表示したり、フッターメニューを画面下に固定するなど応用例もいくつか紹介します。
Bootstrap5でヘッダーやフッターを固定するには？
Bootstrap5を使ってヘッダーやフッターを固定するには次のような方法があります。
- fixed-topを使う
- sticky-topを使う
- position-fixedを使う
それぞれ詳しく解説します。
fixed-top、fixed-bottomを使う方法
Bootstrap5で画面上部や下部に端から端まで要素を配置したい場合はfixed-topやfixed-bottomを使用します。
とくにヘッダーやフッターメニューを固定位置に表示したい場合に使用します。
<header class="fixed-top py-3 bg-light text-center">ヘッダー</header>
<main class="py-3 text-center" style="height: 2000px;">メインコンテンツ</main>
<footer class="fixed-bottom py-3 bg-light text-center">フッター</footer>ただし、この方法だと以下の画像のようにメインコンテンツがヘッダーの裏側に隠れてしまうので、CSSでヘッダーの高さ分のマージンをメインコンテンツに当てる必要があります。
sticky-topを使う方法
メインコンテンツがヘッダーの裏側に隠れてしまうのを防ぎたい場合はsticky-topを使用します。
<header class="sticky-top py-3 bg-light text-center">ヘッダー</header>
<main class="py-3 text-center" style="height: 2000px;">メインコンテンツ</main>こちらを使うことでメインコンテンツが隠れることなく表示されるようになります。
Bootstrap5のNavbarを固定する場合はsticky-topを入れる方法がおすすめです。
<nav class="sticky-top navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>position-fixedを使う方法
Bootstrap5のposition-fixedクラスを使うことで指定した位置に要素を固定することができます。そのとき親要素にposition-relativeを入れておきましょう。
画面上部に固定する場合はこちらのようになります。
<div class="position-relative">
<header class="position-fixed top-0 left-0">ヘッダー</header>
</div>画面下に固定する場合はこちらのようになります。
<div class="position-relative">
<footer class="position-fixed bottom-0 left-0">フッター</footer>
</div>この方法もfixed-topと同じでメインコンテンツがヘッダーの裏側に隠れてしまうので、ヘッダーの高さ分のマージンを入れる必要があります。
まとめ
Bootstrap5のクラスでヘッダーやフッターを固定する方法はいくつかあるので、状況に合わせて最適な方法を選んでください。
ヘッダーの場合はsticky-top、フッターの場合はfixed-bottomを使うのがおすすめです。