Bootstrap によるレスポンシブ Web デザイン
コンテンツの幅を設定する
前のページではデフォルトのコンテナを使ってコンテンツのレイアウトを設計しました．画面の幅がある程度大きくなるとコンテンツの左右にマージン（余白）が現れることも理解しました．ここでは，マージンが現れるタイミング（ブレークポイント）を変更して，ある程度画面の幅が広くなるまで画面の左右いっぱいにコンテンツを配置する方法を考えます．
Bootstrap にはブレークポイントという考え方が存在します．このブレークポイントに基づいて画面の幅が 576px 未満，576px 以上，768px 以上，992 px 以上，1200 px 以上，1400px 以上という6種類でコンテンツの幅を決定します．詳細はこの表を確認してください．たとえば，デフォルトコンテナ (.container) を使った前のページのサンプル では576px 未満ではコンテンツの幅は画面の幅に対して 100% となります．その後，画面が 720px になるまではコンテンツの幅が 540 px になり，画面が 992px になるまではコンテンツが 720px になるといった具合です．
標準コンテナ .container を次の通り .container-sm に変更しても結果は変わらないはずです．なお，sm は small を意味します．（サンプルを見る）
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>
<div class="container-sm">
<h1>Bootstrapのサンプル</h1>
<p>
<code>.container-sm</code>
</p>
<p>
レイアウトを確認するための本文です．レイアウトを確認するための本文です．．．
</p>
</div>
<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>
次の通り .container-md に変更します．なお，md は medium の意味です．このとき，画面サイズが 768px になるまでコンテンツが画面いっぱいに表示されることを確認してください．（サンプルを見る）
index.html（抜粋）
<body>
<div class="container-md">
<h1>Bootstrapのサンプル</h1>
<p>
<code>.container-md</code>
</p>
<p>
レイアウトを確認するための本文です．レイアウトを確認するための本文です．．．
</p>
</div>
次に .container-lg に変更します．なお，lg は large の意味です．下のサンプルコードは冒頭8行と最後の3行が省略されて表示されていることにも注意してください．このページでは，画面幅が 992px になるまでコンテンツが画面いっぱいに表示されることを確認してください．（サンプルを見る）
index.html（抜粋）
<body>
<div class="container-lg">
<h1>Bootstrapのサンプル</h1>
<p>
<code>.container-md</code>
</p>
<p>
レイアウトを確認するための本文です．レイアウトを確認するための本文です．．．
</p>
</div>
次に .container-xl に変更します．なお，xl は extra large の意味です．このとき，画面幅が 1200px になるまでコンテンツが画面いっぱいに表示されることを確認してください．（サンプルを見る）
index.html（抜粋）
<body>
<div class="container-xl">
<h1>Bootstrapのサンプル</h1>
<p>
<code>.container-md</code>
</p>
<p>
レイアウトを確認するための本文です．レイアウトを確認するための本文です．．．
</p>
</div>
さらに .container-xxl に変更します．このとき，画面幅が 1400px になるまでコンテンツが画面いっぱいに表示されることを確認してください．（サンプルを見る）
index.html（抜粋）
<body>
<div class="container-xxl">
<h1>Bootstrapのサンプル</h1>
<p>
<code>.container-md</code>
</p>
<p>
レイアウトを確認するための本文です．レイアウトを確認するための本文です．．．
</p>
</div>
なお，常にコンテンツが画面いっぱいに表示されるようにしたい場合には .container-fluid に変更します．（サンプルを見る）
index.html（抜粋）
<body>
<div class="container-fluid">
<h1>Bootstrapのサンプル</h1>
<p>
<code>.container-md</code>
</p>
<p>
レイアウトを確認するための本文です．レイアウトを確認するための本文です．．．
</p>
</div>
これらの結果をまとめて確認します．body 要素の中にブレークポイントの異なる複数のコンテナを配置しています．それぞれのコンテンツレイアウトがどのタイミングで切り替わるかを確認して，作成したいWebサイトに適したスタイルを見つけてください．（サンプルを見る）
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>
<div class="container-sm">
<h1>Bootstrapのサンプル</h1>
<p>
<code>.container-sm</code>
</p>
<p>
レイアウトを確認するための本文です．レイアウトを確認するための本文です．．．
</p>
</div>
<div class="container-md">
<p>
<code>.container-md</code>
</p>
<p>
レイアウトを確認するための本文です．レイアウトを確認するための本文です．．．
</p>
</div>
<div class="container-lg">
<p>
<code>.container-lg</code>
</p>
<p>
レイアウトを確認するための本文です．レイアウトを確認するための本文です．．．
</p>
</div>
<div class="container-xl">
<p>
<code>.container-xl</code>
</p>
<p>
レイアウトを確認するための本文です．レイアウトを確認するための本文です．．．
</p>
</div>
<div class="container-xxl">
<p>
<code>.container-xxl</code>
</p>
<p>
レイアウトを確認するための本文です．レイアウトを確認するための本文です．．．
</p>
</div>
<div class="container-fluid">
<p>
<code>.container-fluid</code>
</p>
<p>
レイアウトを確認するための本文です．レイアウトを確認するための本文です．．．
</p>
</div>
<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>
最後により実践的な例を示します．ページの上部にはナビゲーションメニューを表示するヘッダー領域を配置します．これは .container-fluid クラスを用いて画面の横幅全体に表示するようにします．その次に本文です．本文の要素には .container-md クラスを付けます．ページの最下部にはフッター領域を配置します．これも .container-fluid クラスによって画面の横幅全体を使って表示するようにします．このようなレイアウトを作成するにあたって 3つの領域を <div> 要素で作成することもできますが，よりその目的を明確にするために <div> の代わりに <header>，<main>，<footer> を利用していることにも注意してください．これによって HTML 文書を解析するためのプログラムがページの構造を機械的に把握できるようになります．（サンプルを見る）
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>
<code>.container-md</code>
</p>
<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>