GitHubで見る

カラム

Columns

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

項目

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

仕組み

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

整列

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

垂直方向の整列

レスポンシブなalign-items-*クラスのいずれかを使用して、縦方向の配置を変更します。

One of three columns

html

<div class="container text-center">
  <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>

One of three columns

html

<div class="container text-center">
  <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>

One of three columns

html

<div class="container text-center">
  <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>

または、レスポンシブな.align-self-*クラスを使って、各カラムのアライメントを個別に変更することもできます。

One of three columns

html

<div class="container text-center">
  <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>

水平方向の整列

レスポンシブなjustify-content-*クラスを使用して、水平方向に整列します。

One of two columns

html

<div class="container text-center">
  <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.

html

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

カラムの改行

フレックスボックスでカラムを改行するには、ちょっとしたハックが必要です。カラムを改行したい場所にwidth: 100%の要素を追加します。通常、これは複数の.rowで実現されますが、すべての実装方法がこれを考慮できるわけではありません。

.col-6 .col-sm-3

html

<div class="container text-center">
  <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

html

<div class="container text-center">
  <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

html

<div class="container text-center">
  <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

html

<div class="container text-center">
  <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

html

<div class="container text-center">
  <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

html

<div class="container text-center">
  <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 .ms-auto

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

.col-auto .me-auto

.col-auto

html

<div class="container text-center">
  <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>

独立カラム・クラス

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

.col-3: width of 25%

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

html

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

このクラスは、ユーティリティと併用することで、レスポンシブに画像をフロートすることができます。必ず.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.

html

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