View on GitHub

Columns (カラム)

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

On this page

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

基本的な仕組み

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

整列

Flexbox の 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>

水平方向に整列

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>

カラムの折り返し

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>

カラムの改行

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>

並び替え

順序用クラス

コンテンツの視覚的な順序を制御するために .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>

カラムのオフセット

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

オフセットクラス

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>

マージンユーティリティ

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

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

.col-auto

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

独立したカラムクラス

また、.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 で内容をラップして、テキストが短い場合はフロートをクリアするようにしてください。

Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris paddenstoel nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Id nullam tellus relem amet commodo telemque olemit. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lantaarnpaal quam venenatis vestibulum. Donec sed odio dui. Maecenas faucibus mollis interdum. Nullam quis risus eget urna salsa tequila vel eu leo. Donec id elit non mi porta gravida at eget metus.

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

  <p>
    Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris paddenstoel nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </p>

  <p>
    Sed posuere consectetur est at lobortis. Etiam porta sem malesuada magna mollis euismod. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Id nullam tellus relem amet commodo telemque olemit. Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam.
  </p>

  <p>
    Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lantaarnpaal quam venenatis vestibulum. Donec sed odio dui. Maecenas faucibus mollis interdum. Nullam quis risus eget urna salsa tequila vel eu leo. Donec id elit non mi porta gravida at eget metus.
  </p>
</div>