Columns (カラム)

Flexbox グリッドシステムをベースに豊富なクラスを使って、カラム(列)を整列、並べ替え、オフセットする方法を紹介します。カラムの幅を制御するためのクラスも紹介します。

On this page

カラムを変更・カスタマイズする前に、まずグリッドに目を通してください。

How they work

グリッドの Flexbox アーキテクチャ上に構築されたカラムです。 Flexbox とは、個々のカラムを変更したり、行レベルのカラムグループを変更するオプションがあることを意味します。カラムの拡大、縮小、その他の変更方法を選択します。
グリッドレイアウトを構築する場合、すべてのコンテンツはカラムになります。 Bootstrap グリッドの階層は、コンテナから、行、カラム(列)、コンテンツへと続きます。まれに、コンテンツとカラムを組み合わせることがありますが、意図しない結果になる可能性があることに注意してください。
レスポンシブなレイアウトを作成するためのクラスを用意しています。 6 つのブレークポイントと各グリッドに 12 個のカラムがあるので、用意されたクラスを組み合わせるだけで望むレイアウトを実現できます。クラスは Sass で無効にすることができます。

Alignment

Flexbox の alignment ユーティリティを使用して、カラムを垂直方向と水平方向に整列できます。

Vertical alignment

One of three columns

<div class="container">
  <div class="row align-items-start">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-center">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
  <div class="row align-items-end">
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
    <div class="col">
      One of three columns
    </div>
  </div>
</div>

One of three columns

<div class="container">
  <div class="row">
    <div class="col align-self-start">
      One of three columns
    </div>
    <div class="col align-self-center">
      One of three columns
    </div>
    <div class="col align-self-end">
      One of three columns
    </div>
  </div>
</div>

Horizontal alignment

One of two columns

<div class="container">
  <div class="row justify-content-start">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-end">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-around">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-between">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
  <div class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Column wrapping

1 つの行内に 12 を超えるカラムが配置されている場合、追加したカラムの各グループは、1 つの単位として新しい行に折り返されます。

.col-9

.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.

.col-6
Subsequent columns continue along the new line.

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
    <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
  </div>
</div>

Column breaks

Flexbox でカラムを改行するにはハックが必要です。複数の .rows で実現できますが、すべての実装方法がこれに対応できるわけではありません。

.col-6 .col-sm-3

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>

    <!-- Force next columns to break to new line -->
    <div class="w-100"></div>

    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
    <div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
  </div>
</div>

また、レスポンシブ表示ユーティリティを利用して特定のブレークポイントで改行できます。

.col-6 .col-sm-4

<div class="container">
  <div class="row">
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>

    <!-- Force next columns to break to new line at md breakpoint and up -->
    <div class="w-100 d-none d-md-block"></div>

    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
    <div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
  </div>
</div>

Reordering

Order classes

コンテンツの視覚的な順序を制御するために .order- クラスを使用します。これらのクラスはレスポンシブなので、ブレークポイントで order を設定することができます (例えば、.order-1.order-md-2)。6 つのグリッドレベルで 1 から 5 をサポートしています。

First in DOM, no order applied

Second in DOM, with a larger order

Third in DOM, with an order of 1

<div class="container">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      Second in DOM, with a larger order
    </div>
    <div class="col order-1">
      Third in DOM, with an order of 1
    </div>
  </div>
</div>

また、レスポンシブな .order-first と .order-last クラスもあり、これを適用することで要素の order を変更することができます。これはそれぞれ order: -1 と order: 6 を適用して要素の order を変更するクラスです。これらのクラスは、必要に応じて番号付きの .order-* クラスと混在させることもできます。

First in DOM, ordered last

Second in DOM, unordered

Third in DOM, ordered first

<div class="container">
  <div class="row">
    <div class="col order-last">
      First in DOM, ordered last
    </div>
    <div class="col">
      Second in DOM, unordered
    </div>
    <div class="col order-first">
      Third in DOM, ordered first
    </div>
  </div>
</div>

Offsetting columns

グリッドのカラムをオフセットするには、レスポンシブな .offset- グリッドクラスとマージンユーティリティの 2 つの方法があります。グリッドクラスはカラムに合わせてサイズを調整しますが、マージンはオフセットの幅を可変にして素早くレイアウトする場合に便利です。

Offset classes

offset-md-* クラスを使ってカラムを右に移動します。これらのクラスはカラムの左マージンを * カラム分増やします。例えば、.offset-md-4 は .col-md-4 を 4 カラムぶん右に移動させます。

.col-md-4

.col-md-4 .offset-md-4

.col-md-3 .offset-md-3

.col-md-6 .offset-md-3

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
  </div>
  <div class="row">
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
    <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
  </div>
  <div class="row">
    <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
  </div>
</div>

レスポンシブブレークポイントでのカラムクリアに加えて、オフセットをリセットする必要がある場合はグリッドのサンプルで動作を確認してください。

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
    <div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
  </div>
  <div class="row">
    <div class="col-sm-6 col-md-5 col-lg-6">.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">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
  </div>
</div>

Margin utilities

v4 で Flexbox に移行したことで、.mr-auto のようなマージンユーティリティを使用して、同階層のカラムを強制的に離すことができるようになりました。

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

<div class="container">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

Standalone column classes

また、.col-* クラスは .row の外側で要素に特定の幅を与えるために使用することもできます。カラムクラスが行の直接の子要素ではない場合、パディングは省略されます。

.col-3: width of 25%

.col-sm-9: width of 75% above sm breakpoint

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

このクラスは、ユーティリティと併用することで、レスポンシブに画像をフロートすることができます。必ず .clearfix で内容をラップして、テキストが短い場合はフロートをクリアするようにしてください。

A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.

As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.

And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>