Bootstrapグリッドシステム入門
レスポンシブレイアウトの基本
Bootstrapのグリッドシステムを使えば、画面サイズに応じて自動的にレイアウトが切り替わるレスポンシブデザインを簡単に実装できます。
この記事では、グリッドの基本概念から実践的なレイアウトパターンまでをステップごとに解説します。
こんな人向けの記事です
- Bootstrapを使ったレイアウトの作り方を知りたい
- レスポンシブデザインの基本を理解したい
- CSSのfloatやflexboxの代わりに簡単にレイアウトを組みたい
Step 1グリッドシステムとは
Bootstrapのグリッドシステムは、画面を12カラムに分割してレイアウトを組む仕組みです。
12という数字がポイントで、12は 1, 2, 3, 4, 6 で割り切れるため、2等分・3等分・4等分・6等分など柔軟なレイアウトが可能です。
なぜ12カラム？
12は多くの数で割り切れる（1, 2, 3, 4, 6, 12）ため、さまざまなレイアウトパターンに対応できます。例：
col-6 × 2 = 2等分、col-4 × 3 = 3等分、col-3 × 4 = 4等分
Step 2基本の3要素：container・row・col
グリッドを使うには、container、row、col の3つをセットで使います。
カラム1
カラム2
カラム3
HTML
<div class="container">
<div class="row">
<div class="col">カラム1</div>
<div class="col">カラム2</div>
<div class="col">カラム3</div>
</div>
</div>| 要素 | 役割 |
|---|---|
container | 全体の横幅を制限し、中央揃えにする外枠 |
row | カラムを横並びにする行（内部でflexboxを使用） |
col | 実際のコンテンツを入れるカラム（均等分割） |
Step 3カラム幅を指定する
col-数字 でカラムの幅を12分割中いくつ分にするか指定できます。
メインコンテンツ（8/12 = 66.7%）
サイドバー（4/12 = 33.3%）
HTML
<div class="container">
<div class="row">
<div class="col-8">メインコンテンツ（8/12 = 66.7%）</div>
<div class="col-4">サイドバー（4/12 = 33.3%）</div>
</div>
</div>1行のカラム数の合計は12以下にする
合計が12を超えると、超えた分のカラムが次の行に折り返されます。例：
col-8 + col-6 = 14 → col-6 が下に落ちる
Step 4ブレークポイントでレスポンシブ対応
col-{ブレークポイント}-{数字} の形式で、画面幅に応じたカラム幅を指定できます。
| クラス | 画面幅 | 用途 |
|---|---|---|
col- | 全サイズ（0px〜） | スマホ |
col-sm- | 576px〜 | 小型タブレット |
col-md- | 768px〜 | タブレット |
col-lg- | 992px〜 | デスクトップ |
col-xl- | 1200px〜 | 大画面 |
HTML
<div class="container">
<div class="row">
<!-- PC: 8/12, タブレット: 6/12, スマホ: 12/12（全幅） -->
<div class="col-12 col-md-6 col-lg-8">メイン</div>
<!-- PC: 4/12, タブレット: 6/12, スマホ: 12/12（全幅） -->
<div class="col-12 col-md-6 col-lg-4">サイド</div>
</div>
</div>ブレークポイントの考え方
小さい画面から大きい画面へ向かって設定するのが基本です（モバイルファースト）。col-12 col-md-6 col-lg-4 は「スマホで全幅 → タブレットで半分 → PCで1/3」という意味です。
Step 5実践：よく使うレイアウトパターン
パターン1：メイン + サイドバー
HTML
<div class="container">
<div class="row">
<div class="col-12 col-lg-8">メインコンテンツ</div>
<div class="col-12 col-lg-4">サイドバー</div>
</div>
</div>パターン2：3カラムのカード
HTML
<div class="container">
<div class="row">
<div class="col-12 col-md-4">カード1</div>
<div class="col-12 col-md-4">カード2</div>
<div class="col-12 col-md-4">カード3</div>
</div>
</div>パターン3：ヘッダー + コンテンツ + フッター
HTML
<div class="container">
<div class="row">
<div class="col-12">ヘッダー</div>
</div>
<div class="row">
<div class="col-12 col-lg-3">ナビ</div>
<div class="col-12 col-lg-6">メイン</div>
<div class="col-12 col-lg-3">サイド</div>
</div>
<div class="row">
<div class="col-12">フッター</div>
</div>
</div>まとめ
Bootstrapのグリッドシステムを使えば、複雑なレスポンシブレイアウトもシンプルなクラス名だけで実現できます。
- container → row → col の3層構造が基本
- 12カラムの中で
col-数字で幅を指定 col-md-等のブレークポイントでレスポンシブ対応- 1行のカラム合計は12以下にする
- モバイルファースト（小さい画面から設定）が基本