bootstrap-layout

Bootstrap 5.3 レイアウトシステム

Bootstrap のレイアウトシステムは Flexbox を基盤とし、レスポンシブレイアウトを作成するための強力な 12 カラムグリッドを提供します。このスキルでは、コンテナー、グリッドシステム、ブレークポイント、レイアウトユーティリティについて説明します。

ブレークポイント

Bootstrap のレスポンシブデザインでは、デフォルトで 6 つのブレークポイントを使用します。

ブレークポイント	クラスの接頭辞	寸法
特小	なし	<576px
小	sm	≥576px
中	md	≥768px
大	lg	≥992px
特大	xl	≥1200px
超特大	xxl	≥1400px

ブレークポイントは指定された幅以上で適用されます（モバイルファースト）。

コンテナー

コンテナーはレイアウトの基本的な構成要素です。

コンテナーの種類

<div class="container">...</div>


<div class="container-fluid">...</div>


<div class="container-sm">100% until sm, then fixed</div>
<div class="container-md">100% until md, then fixed</div>
<div class="container-lg">100% until lg, then fixed</div>
<div class="container-xl">100% until xl, then fixed</div>
<div class="container-xxl">100% until xxl, then fixed</div>

コンテナーの最大幅

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
.container	100%	540px	720px	960px	1140px	1320px
.container-sm	100%	540px	720px	960px	1140px	1320px
.container-md	100%	100%	720px	960px	1140px	1320px
.container-lg	100%	100%	100%	960px	1140px	1320px
.container-xl	100%	100%	100%	100%	1140px	1320px
.container-xxl	100%	100%	100%	100%	100%	1320px
.container-fluid	100%	100%	100%	100%	100%	100%

グリッドシステム

グリッドは、コンテナー、行、カラムの組み合わせで構成されます。

基本構造

<div class="container">
  <div class="row">
    <div class="col">Column 1</div>
    <div class="col">Column 2</div>
    <div class="col">Column 3</div>
  </div>
</div>

等幅カラム

<div class="row">
  <div class="col">1 of 2</div>
  <div class="col">2 of 2</div>
</div>

<div class="row">
  <div class="col">1 of 3</div>
  <div class="col">2 of 3</div>
  <div class="col">3 of 3</div>
</div>

特定のカラム幅

特定の幅（1～12）を指定するには、.col-{number} を使用します。

<div class="row">
  <div class="col-8">8 columns wide</div>
  <div class="col-4">4 columns wide</div>
</div>

<div class="row">
  <div class="col-3">3 columns</div>
  <div class="col-6">6 columns</div>
  <div class="col-3">3 columns</div>
</div>

レスポンシブカラム

ブレークポイントの接頭辞を組み合わせて、レスポンシブな動作を設定します。

<div class="row">
  <div class="col-12 col-md-6">Left on md+</div>
  <div class="col-12 col-md-6">Right on md+</div>
</div>


<div class="row">
  <div class="col-12 col-sm-6 col-lg-4">Responsive column</div>
</div>

自動レイアウトカラム

<div class="row">
  <div class="col">Auto</div>
  <div class="col-6">6 columns</div>
  <div class="col">Auto</div>
</div>


<div class="row justify-content-center">
  <div class="col-auto">Variable width content</div>
</div>

行あたりのカラム数

行ごとのカラム数を指定します。

<div class="row row-cols-2">
  <div class="col">Item 1</div>
  <div class="col">Item 2</div>
  <div class="col">Item 3</div>
  <div class="col">Item 4</div>
</div>


<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
  <div class="col">Item</div>
  
</div>

ガター

ガターはカラム間の隙間です。デフォルトは 1.5rem（24px）です。

水平方向のガター（gx-*）

<div class="row gx-5">
  <div class="col">Wide horizontal gutters</div>
  <div class="col">Wide horizontal gutters</div>
</div>

垂直方向のガター（gy-*）

<div class="row gy-4">
  <div class="col-6">Vertical gutter when wrapping</div>
  <div class="col-6">Vertical gutter when wrapping</div>
  <div class="col-6">Vertical gutter when wrapping</div>
</div>

水平方向と垂直方向のガター（g-*）

<div class="row g-3">
  <div class="col-6">Equal gutters</div>
  <div class="col-6">Equal gutters</div>
</div>


<div class="row g-0">
  <div class="col">No gutters</div>
  <div class="col">No gutters</div>
</div>

レスポンシブなガター

<div class="row g-2 g-md-4 g-lg-5">
  <div class="col">Responsive gutters</div>
</div>

カラムの配置

垂直方向の配置

<div class="row align-items-start">...</div>
<div class="row align-items-center">...</div>
<div class="row align-items-end">...</div>


<div class="row">
  <div class="col align-self-start">Top</div>
  <div class="col align-self-center">Middle</div>
  <div class="col align-self-end">Bottom</div>
</div>

水平方向の配置

<div class="row justify-content-start">...</div>
<div class="row justify-content-center">...</div>
<div class="row justify-content-end">...</div>
<div class="row justify-content-around">...</div>
<div class="row justify-content-between">...</div>
<div class="row justify-content-evenly">...</div>

カラムの順序

順序クラス

<div class="row">
  <div class="col order-3">First in DOM, last visually</div>
  <div class="col order-2">Second</div>
  <div class="col order-1">Third in DOM, first visually</div>
</div>


<div class="row">
  <div class="col order-md-2">Second on md+</div>
  <div class="col order-md-1">First on md+</div>
</div>

オフセットクラス

<div class="row">
  <div class="col-md-4 offset-md-4">Centered column</div>
</div>


<div class="row">
  <div class="col-md-4 ms-auto">Pushed right</div>
</div>

ネスト

カラムはネストできます。

<div class="row">
  <div class="col-9">
    Level 1
    <div class="row">
      <div class="col-6">Level 2</div>
      <div class="col-6">Level 2</div>
    </div>
  </div>
</div>

高度なグリッドの動作

カラムの折り返し

1 つの行に 12 を超えるカラムを配置すると、余分なカラムはひとまとまりとして次の行に折り返されます。

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4 (wraps to new line since 9 + 4 = 13 > 12)</div>
  <div class="col-6">.col-6 (continues on the new line)</div>
</div>

カラムの改行

全幅の要素を挿入すると、カラムを強制的に次の行へ移動できます。

<div class="row">
  <div class="col-6">Column 1</div>
  <div class="col-6">Column 2</div>
  
  <div class="w-100"></div>
  <div class="col-6">Column 3 (on new line)</div>
  <div class="col-6">Column 4 (on new line)</div>
</div>

表示ユーティリティを使うと、特定のブレークポイントで改行を適用できます。

<div class="row">
  <div class="col-6 col-sm-4">Column 1</div>
  <div class="col-6 col-sm-4">Column 2</div>
  
  <div class="w-100 d-none d-md-block"></div>
  <div class="col-6 col-sm-4">Column 3</div>
</div>

単独で使用するカラムクラス

.row の外側で .col-* クラスを使用すると、要素に特定の幅を設定できます。行の外側で使用した場合、カラムのパディングは適用されません。

<div class="col-3 p-3 mb-2">
  .col-3: width of 25%
</div>


<div class="col-sm-9 p-3">
  .col-sm-9: width of 75% above sm breakpoint
</div>

フロートユーティリティと組み合わせると、レスポンシブなフロート画像を配置できます。

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">
  <p>Text wraps around the floated image...</p>
</div>

ガターによるオーバーフローへの対処

大きなガター（.gx-5 など）は、水平方向のオーバーフローを引き起こすことがあります。対処方法は 2 つあります。

コンテナーに対応するパディングを追加します。

<div class="container px-4">
  <div class="row gx-5">
    <div class="col">Column with large gutter</div>
    <div class="col">Column with large gutter</div>
  </div>
</div>

または、overflow-hidden のラッパーを使用します。

<div class="container overflow-hidden">
  <div class="row gx-5">
    <div class="col">Column with large gutter</div>
    <div class="col">Column with large gutter</div>
  </div>
</div>

CSS Grid（代替）

注： Bootstrap の CSS Grid システムは試験的な機能であり、v5.1.0 時点ではオプトイン方式です。デフォルトでは無効になっており、Sass の設定で有効にする必要があります。

Bootstrap 5.3 では CSS Grid もサポートされています。

<div class="grid">
  <div class="g-col-6">Half width</div>
  <div class="g-col-6">Half width</div>
</div>


<div class="grid" style="--bs-columns: 3;">
  <div class="g-col-1">1/3</div>
  <div class="g-col-2">2/3</div>
</div>

Z-index ユーティリティ

Bootstrap には、重なり順を制御するための z-index ユーティリティクラスが用意されています。

ユーティリティクラス

クラス	値
.z-n1	-1
.z-0	0
.z-1	1
.z-2	2
.z-3	3

これらの 1 桁の小さな値（1、2、3）は、同じ重なりコンテキスト内で、デフォルト、ホバー、アクティブなどのコンポーネント状態を制御するのに便利です。

コンポーネントの重ね順

Bootstrap のコンポーネントでは、競合を防ぐため、大きな間隔を設けた標準化された z-index スケールを使用します。

コンポーネント	z-index
ドロップダウン	1000
スティッキー	1020
固定	1030
オフキャンバスの背景	1040
オフキャンバス	1045
モーダルの背景	1050
モーダル	1055
ポップオーバー	1070
ツールチップ	1080
トースト	1090

警告： 個別の z-index 値をカスタマイズすることは避けてください。このスケールは一体的なシステムとして設計されています。1 つの値を変更した場合、適切な重なり順を維持するために、ほかの値も調整する必要が生じる可能性があります。これらの値を一貫してカスタマイズするには、Sass 変数（$zindex-dropdown、$zindex-modal など）を使用してください。

z-index と併用できる位置指定ユーティリティについては、references/grid-reference.md を参照してください。

よく使用されるレイアウトパターン

サイドバーレイアウト

<div class="container-fluid">
  <div class="row">
    <nav class="col-md-3 col-lg-2 d-md-block sidebar">
      Sidebar
    </nav>
    <main class="col-md-9 col-lg-10 ms-sm-auto px-md-4">
      Main content
    </main>
  </div>
</div>

カードグリッド

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
  <div class="col">
    <div class="card h-100">Card 1</div>
  </div>
  <div class="col">
    <div class="card h-100">Card 2</div>
  </div>
  
</div>

Sass によるカスタマイズ

Bootstrap をソースからコンパイルする場合、Sass 変数とミックスインを使用してレイアウトシステムをカスタマイズできます。

主な変数

// Override before importing Bootstrap
$grid-columns: 12;           // Change to 16 or 24 for finer control
$grid-gutter-width: 1.5rem;  // Adjust column gaps
$enable-cssgrid: true;       // Enable CSS Grid classes

メディアクエリのミックスイン

// Mobile-first (applies at breakpoint and UP)
@include media-breakpoint-up(md) { ... }

// Desktop-first (applies BELOW breakpoint)
@include media-breakpoint-down(lg) { ... }

// Range (applies BETWEEN two breakpoints)
@include media-breakpoint-between(sm, xl) { ... }

// Single breakpoint only
@include media-breakpoint-only(md) { ... }

グリッドのミックスイン

ユーティリティクラスを使わずに、セマンティックなグリッドレイアウトを作成します。

.blog-layout {
  @include make-row();
}

.blog-main {
  @include make-col-ready();
  @include make-col(8);  // 8 of 12 columns
}

.blog-sidebar {
  @include make-col-ready();
  @include make-col(4);  // 4 of 12 columns
}

変数の一覧とミックスインのドキュメントについては、references/sass-customization.md を参照してください。

その他のリソース

リファレンスファイル

• references/grid-reference.md - グリッドクラスの完全なリファレンス
• references/sass-customization.md - レイアウトをカスタマイズするための Sass 変数とミックスイン

サンプルファイル

• examples/responsive-layouts.html - レスポンシブレイアウトのパターン
• examples/sass-customization.scss - Sass によるカスタマイズの例