メインコンテンツへスキップ

列アイテム（Columns） v5.0.0-alpha1グリッドより分離

Flexboxグリッドシステムを使って、整列、順序付け、オフセットのいくつかのオプションで列を変更する方法を学習する。さらに列クラスを使用して非グリッド要素の幅を管理する方法も紹介。

目次

使い方（How they work）

  • 列はグリッドのFlexbox構造上に構築される。Flexboxとは、行レベルで個々の列を変更したり、列のグループを変更したりするためのオプションがある。列の拡大縮小やその他の変更方法を選択する。
  • グリッドレイアウトを構築する場合、すべてのコンテンツは列に配置される。Bootstrapのグリッドの階層は、コンテナ、行、列、コンテンツの順である。まれにコンテンツと列の組み合わせがあるが、意図しない結果が生じる可能性があるので注意。
  • Bootstrapには、迅速にレスポンシブ性の高いレイアウトを作成するための定義済みクラスが組み込まれている。各グリッド層に6つのブレークポイントと12の列があるため、必要なレイアウトを作成するのにすでに構築済みの数十のクラスがある。これは、必要に応じてSassで無効にできる。

配置（Alignment）

Flex配置ユーティリティを使用して、列を縦と横に整列させる。

垂直方向の配置（Vertical alignment）

列全体の垂直方向の配置

見本 見やすいよう色を付けています

●列を上揃え

3つの列の1列目
（高め）
...
...
3つの列の2列目
3つの列の3列目
（少し高め）

●列を上下中央揃え

3つの列の1列目
（高め）
...
...
3つの列の2列目
3つの列の3列目
（少し高め）

●列を下揃え

3つの列の1列目
（高め）
...
...
3つの列の2列目
3つの列の3列目
（少し高め）
設定例
列を上揃え<div class="container">
	<div class="row align-items-start">
		<div class="col">
		 3つの列の1列目
		 （高め）
		</div>
		<div class="col">
		 3つの列の2列目
		</div>
		<div class="col">
		 3つの列の3列目
		 （少し高め）
		</div>
	</div>
</div>
列を上下中央揃え<div class="container">
	<div class="row align-items-center">
		<div class="col">
		 3つの列の1列目
		 （高め）
		</div>
		<div class="col">
		 3つの列の2列目
		</div>
		<div class="col">
		 3つの列の3列目
		 （少し高め）
		</div>
	</div>
</div>
列を下揃え<div class="container">
	<div class="row align-items-end">
		<div class="col">
		 3つの列の1列目
		 （高め）
		</div>
		<div class="col">
		 3つの列の2列目
		</div>
		<div class="col">
		 3つの列の3列目
		 （少し高め）
		</div>
	</div>
</div>
【設定】
  • 列を上揃え（align-items: flex-start;）：.row.align-items-start > .col
  • 列を上下中央揃え（align-items: center;）：.row.align-items-center > .col
  • 列を下揃え（align-items: flex-end;）：.row.align-items-end > .col

列ごとの垂直方向の配置

見本 見やすいよう色を付けています
3つの列の1列目（上揃え）
3つの列の2列目（中央揃え）
3つの列の3列目（下揃え）
設定例
<div class="container">
	<div class="row">
		<div class="col align-self-start">
			3つの列の1列目（上揃え）
		</div>
		<div class="col align-self-center">
			3つの列の2列目（中央揃え）
		</div>
		<div class="col align-self-end">
			3つの列の3列目（下揃え）
		</div>
	</div>
</div>
【設定】
  • 列を上揃え（align-self: flex-start;）：.row > .col.align-self-start
  • 列を中央揃え（align-self: center;）：.row > .col.align-self-center
  • 列を下揃え（align-self: flex-end;）：.row > .col.align-self-end

水平方向の配置（Horizontal alignment）v5.0.0-alpha1クラス追加

見本 見やすいよう色を付けています

●列の行頭揃え

2つの列の1列目
2つの列の2列目

●列の中央揃え

2つの列の1列目
2つの列の2列目

●列の行末揃え

2つの列の1列目
2つの列の2列目

●列を等間隔に配置

2つの列の1列目
2つの列の2列目

●列を両端から均等に配置

2つの列の1列目
2つの列の2列目

●列の間隔を両端から均等に配置 v5.0.0-alpha1追加

2つの列の1列目
2つの列の2列目
設定例
列の行頭揃え<div class="container">
	<div class="row justify-content-start">
		<div class="col-4">
			2つの列の1列目
		</div>
		<div class="col-4">
			2つの列の2列目
		</div>
	</div>
</div>
列の中央揃え<div class="container">
	<div class="row justify-content-center">
		<div class="col-4">
			2つの列の1列目
		</div>
		<div class="col-4">
			2つの列の2列目
		</div>
	</div>
</div>
列の行末揃え<div class="container">
	<div class="row justify-content-end">
		<div class="col-4">
			2つの列の1列目
		</div>
		<div class="col-4">
			2つの列の2列目
		</div>
	</div>
</div>
列を等間隔に配置<div class="container">
	<div class="row justify-content-around">
		<div class="col-4">
			2つの列の1列目
		</div>
		<div class="col-4">
			2つの列の2列目
		</div>
	</div>
</div>
列を両端から均等に配置<div class="container">
	<div class="row justify-content-between">
		<div class="col-4">
			2つの列の1列目
		</div>
		<div class="col-4">
			2つの列の2列目
		</div>
	</div>
</div>
列の間隔を両端から均等に配置<div class="container">
	<div class="row justify-content-evenly">
		<div class="col-4">
			2つの列の1列目
		</div>
		<div class="col-4">
			2つの列の2列目
		</div>
	</div>
</div>
【設定】
  • 列の行頭揃え（justify-content: flex-start;）：.row.justify-content-start > .col
  • 列の中央揃え（justify-content: center;）：.row.justify-content-center > .col
  • 列の行末揃え（justify-content: flex-end;）：.row.justify-content-end > .col
  • 列を等間隔に配置（justify-content: space-around;）：.row.justify-content-around > .col
  • 列を両端から均等に配置（justify-content: space-between;）：.row.justify-content-between > .col
  • 列の間隔を両端から均等に配置（justify-content: space-evenly;）：.row.justify-content-evenly > .col
【変更履歴】
  • 【v5.0.0-alpha1】
    • .justify-content-evenly が追加

列の折り返し（Column wrapping）

1つの行に列の数値の合計が12以上で配置されている場合、余分な列の各グループは1つの単位として新しい行に折り返される。

見本 見やすいよう色を付けています
1列目: .col-9
2列目: .col-4
9 + 4 = 13 > 12 になるので、この列は1つの連続したユニットとして新しい行に折り返される
3列目: .col-6
後続の列は新しい行に沿って継続
設定例
<div class="container">
	<div class="row">
		<div class="col-9">1列目: .col-9</div>
		<div class="col-4">2列目: .col-4<br> ... </div>
		<div class="col-6">3列目: .col-6<br> ... </div>
	</div>
</div>

列の分割（Column breaks）

Flexboxの新しい行に列を分割するには、小さなハックが必要。列を新しい行で折り返したい場合は、width: 100% の要素を追加する。通常、これは複数の .row で実行されるが、全ての実装方法がこれを考慮するわけではない。

見本 見やすいよう色を付けています

●小サイズ以上で強制改行

1列目: .col-6 .col-sm-3
2列目: .col-6 .col-sm-3
3列目: .col-6 .col-sm-3
4列目: .col-6 .col-sm-3

※参考：強制改行なし

1列目: .col-6 .col-sm-3
2列目: .col-6 .col-sm-3
3列目: .col-6 .col-sm-3
4列目: .col-6 .col-sm-3
設定例
<div class="container">
	<div class="row">
		<div class="col-6 col-sm-3">1列目: .col-6 .col-sm-3</div>
		<div class="col-6 col-sm-3">2列目: .col-6 .col-sm-3</div>
		<!-- 次の列を強制的に改行する -->
		<div class="w-100"></div>
		<div class="col-6 col-sm-3">3列目: .col-6 .col-sm-3</div>
		<div class="col-6 col-sm-3">4列目: .col-6 .col-sm-3</div>
	</div>
</div>

また、レスポンシブ表示ユーティリティを使用して特定のブレークポイントで分割を適用することも可能。

見本 見やすいよう色を付けています
1列目: .col-6 .col-sm-4
2列目: .col-6 .col-sm-4
3列目: .col-6 .col-sm-4
4列目: .col-6 .col-sm-4
設定例
<div class="container">
	<div class="row">
		<div class="col-6 col-sm-4">1列目: .col-6 .col-sm-4</div>
		<div class="col-6 col-sm-4">2列目: .col-6 .col-sm-4</div>

		<!-- 次の列を中サイズ以上で強制的に新しい行に分割 -->
		<div class="w-100 d-none d-md-block"></div>

		<div class="col-6 col-sm-4">3列目: .col-6 .col-sm-4</div>
		<div class="col-6 col-sm-4">4列目: .col-6 .col-sm-4</div>
	</div>
</div>
【設定】
  • 強制的に改行したい箇所に div.w-100 を入れる

 

並べ替え（Reordering）

列の順序変更（Order classes）v5.0.0-alpha1設定変更、クラス追加

.order- クラスを使用して、コンテンツの視覚的順序を制御。これらのクラスはレスポンシブ対応なので、ブレークポイントで order を設定することが可能（.order-1.order-md-2 など）。5つのグリッド層のすべてで 0 から 5 のサポートがなされている。

見本 見やすいよう色を付けています
DOMでは1番目だが表示順序は2番目
DOMでは2番目だが表示順序は最後
DOMでは3番目だが表示順序は最初
設定例
<div class="container">
	<div class="row">
		<div class="col order-2">
			DOMでは1番目だが表示順序は2番目
		</div>
		<div class="col order-3">
			DOMでは2番目だが表示順序は最後
		</div>
		<div class="col order-1">
			DOMでは3番目だが表示順序は最初
		</div>
	</div>
</div>

レスポンシブな .order-first と .order-last クラスもあり、order: -1 と order: 6 を適用することで要素の順序を変更。このクラスは、必要に応じて番号付きの .order-* クラスと混在可能。

見本 見やすいよう色を付けています
DOMでは1番目だが表示順序は最後
DOMでは2番目だが表示順序付けはない
DOMでは3番目だが表示順序は最初
設定例
<div class="container">
	<div class="row">
		<div class="col order-last">
			DOMでは1番目だが表示順序は最後
		</div>
		<div class="col">
			DOMでは2番目だが表示順序付けはない
		</div>
		<div class="col order-first">
			DOMでは3番目だが表示順序は最初
		</div>
	</div>
</div>
【設定】
  • .col(-{breakpoint})-* に .order(-{breakpoint})-* を追加（* は並べたい順に0～5で設定可能）
  • 優先的に最初に表示したい場合は、.order(-{breakpoint})-first を追加
  • 優先的に最後に表示したい場合は、.order(-{breakpoint})-last を追加
【注意】
  • 設定する際は、{breakpoint} を揃えること（order-lg-3...order-1...order-md-2 と設定してもorder-1,order-md-2,order-lg-3 の順には表示されない模様）
【変更履歴】
  • 【v5.0.0-alpha1】
    • 設定できる数字が0～12より0～5に変更（12は多すぎるので5に減らした）
    • .order-last の設定： order: 13 ⇒ order: 6
    • .order-xxl-* が追加
定義済みクラスの種類 *は0～5の整数かfirst/last
デバイスの幅 極小
縦モバイルサイズ
<576px		 小
横モバイルサイズ
≥576px		 中
タブレットサイズ
≥768px		 大
デスクトップサイズ
≥992px		 特大
大画面サイズ
≥1200px		 超特大
ワイド画面サイズ
≥1400px
全サイズで適用 .order-*
576px以上で適用 .order-sm-*
768px以上で適用 .order-md-*
992px以上で適用 .order-lg-*
1200px以上で適用 .order-xl-*
1400px以上に適用 .order-xxl-*
v5.0.0-alpha1追加

空白列の指定（Offsetting columns）v5.0.0-alpha1クラス追加

グリッドカラムは、レスポンシブの .offset- グリッドクラスと空白ユーティリティの二つの方法でオフセット可能。グリッドクラスのサイズは余白がクイックレイアウトのより有効な変数のオフセットの幅のある列に一致。

オフセットクラス（Offset classes）

.offset-md-* クラスを使用して列を行末に移動する。これらのクラスは、列の行頭余白を * 列だけ増加させる。例えば、.offset-md-4 は4列分 .col-md-4 を移動する。

見本 見やすいよう色と枠を付けています

●有効/空白/有効

1列目: .col-md-4
2列目: .col-md-4 .offset-md-4

●空白/有効/空白/有効

1列目: .col-md-3 .offset-md-3
2列目: .col-md-3 .offset-md-3

●空白/有効/空白

1列目: .col-md-6 .offset-md-3
設定例
<div class="container">
	<!-- 有効/空白/有効 -->
	<div class="row">
		<div class="col-md-4">1列目:...</div>
		<div class="col-md-4 offset-md-4">2列目:...</div>
	</div>

	<!-- 空白/有効/空白/有効 -->
	<div class="row">
		<div class="col-md-3 offset-md-3">1列目:...</div>
		<div class="col-md-3 offset-md-3">2列目:...</div>
	</div>

	<!-- 空白/有効/空白 -->
	<div class="row">
		<div class="col-md-6 offset-md-3">1列目:...</div>
	</div>
</div>

レスポンシブ・ブレークポイントでの列クリアに加えて、空白列をリセットする必要があるかもしれない。グリッドの実例にも記載。

見本 見やすいよう色を付けています

●極小サイズでは縦積みに表示、小サイズでは列の間に空白あり、中サイズ以上では1:1の表示

1列目: .col-sm-5 .col-md-6
2列目: .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

●極小サイズでは縦積みに表示、小サイズでは1:1の表示、中サイズでは列の間に空白あり、大サイズ以上では再び1:1の表示

1列目: .col-sm-6 .col-md-5 .col-lg-6
2列目: .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
設定例
<div class="container">
	<!-- 極小サイズでは縦積みに表示、小サイズでは列の間に空白あり、中サイズ以上では1:1の表示 -->
	<div class="row">
		<div class="col-sm-5 col-md-6">1列目: .col-sm-5 .col-md-6</div>
		<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">2列目: .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
	</div>
	<!-- 極小サイズでは縦積みに表示、小サイズでは1:1の表示、中サイズでは列の間に空白あり、大サイズ以上では再び1:1の表示 -->
	<div class="row">
		<div class="col-sm-6 col-md-5 col-lg-6">1列目: .col-sm-6 .col-md-5 .col-lg-6</div>
		<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">2列目: .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
	</div>
</div>
【設定】
  • div.col(-{breakpoint})-* に .offset(-{breakpoint})-*（以下の「定義済みクラスの種類」から選択）を追加（その列の行頭側が空白になる）
【変更履歴】
  • 【v5.0.0-alpha1】
    • .offset-xxl-* が追加
定義済みクラスの種類 *は1～12の整数
デバイスの幅 極小
縦モバイルサイズ
<576px		 小
横モバイルサイズ
≥576px		 中
タブレットサイズ
≥768px		 大
デスクトップサイズ
≥992px		 特大
大画面サイズ
≥1200px		 超特大
ワイド画面サイズ
≥1400px
全サイズで適用 .offset-*
576px以上で適用 .offset-sm-*
768px以上で適用 .offset-md-*
992px以上で適用 .offset-lg-*
1200px以上で適用 .offset-xl-*
1400px以上で適用 .offset-xxl-*
v5.0.0-alpha1追加

マージンクラス（Margin utilities）v5.0.0-beta1クラス名変更

v4のFlexboxへの移行により、.me-auto のようなマージンユーティリティを使用して、兄弟列の間をを互いに空ける。

見本 見やすいよう色と枠を付けています

●有効/空白/有効1

1列目: .col-md-4
2列目: .col-md-4 .ms-auto

●空白/有効/空白/有効

1列目: .col-md-3 .ms-md-auto
2列目: .col-md-3 .ms-md-auto

●有効列を両端に

1列目: .col-auto .me-auto
2列目: .col-auto
Bootstrap5.xの設定例 緑背景が変更箇所
有効/空白/有効1<div class="container">
	<div class="row">
		<div class="col-md-4">1列目:...</div>
		<div class="col-md-4 ms-auto">2列目:...</div>
	</div>
</div>
空白/有効/空白/有効<div class="container">
	<div class="row">
		<div class="col-md-3 ms-md-auto">1列目:...</div>
		<div class="col-md-3 ms-md-auto">2列目:...</div>
	</div>
</div>
有効列を両端に<div class="container">
	<div class="row">
		<div class="col-auto me-auto">1列目:...</div>
		<div class="col-auto">2列目:...</div>
	</div>
</div>
※Bootstrap4.xの設定例 赤背景が変更箇所
有効/空白/有効1<div class="container">
	<div class="row">
		<div class="col-md-4">1列目:...</div>
		<div class="col-md-4 ml-auto">2列目:...</div>
	</div>
</div>
空白/有効/空白/有効<div class="container">
	<div class="row">
		<div class="col-md-3 ml-md-auto">1列目:...</div>
		<div class="col-md-3 ml-md-auto">2列目:...</div>
	</div>
</div>
有効列を両端に<div class="container">
	<div class="row">
		<div class="col-auto mr-auto">1列目:...</div>
		<div class="col-auto">2列目:...</div>
	</div>
</div>
【設定】
  • div.col(-{breakpoint})-* に .m{s|e|x}(-{breakpoint})-auto を追加
【変更履歴】
  • 【v5.0.0-beta1】
    • RTL（右書き）の設定追加に伴い空白ユーティリティのクラス名変更
      • .ml(-{breakpoint})-auto ⇒ .ms(-{breakpoint})-auto
      • .mr(-{breakpoint})-auto ⇒ .me(-{breakpoint})-auto

 

独立した列クラス（Standalone column classes）v5.0.0-alpha1新設、v5.0.0-beta1設定変更

.col-* クラスを .row の外で使用して、要素に特定の幅を与えることも可能。列クラスが行の非直接の子要素として使用される場合はpaddingは省略される。

見本
.col-3: 常時25%の幅
.col-sm-9: sm（小）ブレークポイント以上では75%の幅
設定例
<div class="col-3 bg-light p-3 border">
	.col-3: 常時25%の幅
</div>
<div class="col-sm-9 bg-light p-3 border">
	.col-sm-9: sm（小）ブレークポイント以上では75%の幅
</div>

クラスをユーティリティと一緒に使用すればレスポンシブなフロート（横の配置）画像が作成可能。テキストが短い場合は、コンテンツを .clearfix で囲んでフロートをクリアする。

見本
Placeholderレスポンシブなフロート画像

プレースホルダーテキストの段落。ここでは、clearfixクラスの使用法を示すために使用している。ここでは、列がフロートされた画像とどのように相互作用するかを示すために、かなりの数の意味のないフレーズを追加している。

ご覧のとおり、段落はフロートされた画像を優雅に包み込む。ここで、これが実際のコンテンツでどのように見えるかを想像してみよう。この退屈なプレースホルダーテキストだけでなく、実際には具体的な情報を伝えていない。それは単にスペースを占めるだけであり、本格的に読むべきではない。

それでも、ここでは、このプレースホルダーテキストを読み続け、さらに洞察を深めたり、隠されたイースターエッグのようなコンテンツを期待したりしている。冗談じゃないかもしれない。でも残念ながら、それはどこにもない。

Bootstrap5.xの設定例 緑背景が変更箇所
<div class="clearfix">
	<img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">
	<p>プレースホルダーテキストの段落。...</p>
	<p>...</p>
	<p>...</p>
</div>
【設定】
  • .row を設定せず、.col(-{breakpoint})-* + .col(-{breakpoint})-*...だけでグリッドの設定が可能に
【変更履歴】
  • 【v5.0.0-beta1】
    • RTL（右書き）の設定追加に伴いユーティリティのクラス名変更
      • 行頭側のマージン：.ml(-{breakpoint})-* ⇒ .ms(-{breakpoint})-*
      • 行末揃え：.float(-{breakpoint})-right ⇒ .float(-{breakpoint})-end