カラム Columns

flexboxグリッドシステムのおかげで、配置、順序付け、オフセットのための多数のオプションを使用してcolumnsを変更する方法を学びます。また、column classesを使用して非grid要素の幅を管理する方法も確認できます。

On this page

注意！ gridのcolumnsを変更およびカスタマイズする方法を学ぶ前に、必ずGridページを最初に読んでください。

仕組み

Columnsはgridのflexboxアーキテクチャに基づいて構築されています。 Flexboxを使用することで、個々のcolumnsを変更したり、rowレベルでcolumnsのグループを変更したりするオプションがあります。columnsがどのように成長、縮小、またはその他の方法で変化するかを選択できます。
gridレイアウトを構築する場合、すべてのコンテンツはcolumnsに配置されます。 Bootstrapのgridの階層は、containerからrowからcolumn、そしてあなたのコンテンツへと続きます。まれに、コンテンツとcolumnを組み合わせることもありますが、意図しない結果が生じる可能性があることに注意してください。
Bootstrapには、高速でレスポンシブなレイアウトを作成するための事前定義されたclassesが含まれています。 6つのbreakpointsと各gridティアに12のcolumnsがあるため、希望のレイアウトを作成するために既に構築された数十のclassesがあります。必要に応じてSass経由でこれを無効にすることができます。

配置

flexbox配置utilitiesを使用して、columnsを垂直および水平に配置します。

垂直配置

レスポンシブなalign-items-* classesのいずれかを使用して、垂直配置を変更します。

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-* classesのいずれかを使用して、各columnの配置を個別に変更します。

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-* classesのいずれかを使用して、水平配置を変更します。

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>

Columnの折り返し

単一のrow内に12を超えるcolumnsが配置されている場合、余分なcolumnsの各グループは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>

Columnの改行

flexboxで新しい行にcolumnsを改行するには、小さなハックが必要です：columnsを新しい行に折り返したい場所に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>

レスポンシブdisplay utilitiesを使用して、特定のbreakpointsでこの改行を適用することもできます。

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

.order- classesを使用して、コンテンツの視覚的な順序を制御します。これらのclassesはレスポンシブなので、breakpointごとにorderを設定できます（例：.order-1.order-md-2）。6つすべてのgridティアで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: -1とorder: 6をそれぞれ適用することで、要素のorderを変更するレスポンシブな.order-firstと.order-last classesもあります。これらのclassesは、必要に応じて番号付きの.order-* classesと混在させることもできます。

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>

さらに.order-* classesが必要な場合は、$utilities Sass mapを変更して新しいものを追加できます。詳細については、Sass mapsとloopsのドキュメントまたはutilitiesの変更のドキュメントを参照してください。

$utilities: map-merge(
  $utilities,
  (
    "order": map-merge(
      map-get($utilities, "order"),
      (
        values: map-merge(
          map-get(map-get($utilities, "order"), "values"),
          (
            6: 6, // Add a new `.order-{breakpoint}-6` utility
            last: 7 // Change the `.order-{breakpoint}-last` utility to use the next number
          )
        ),
      ),
    ),
  )
);

Columnsのオフセット

gridのcolumnsをオフセットするには、2つの方法があります：レスポンシブな.offset- grid classesとmargin utilitiesです。Grid classesはcolumnsに合わせてサイズ設定されますが、marginsはオフセットの幅が可変である迅速なレイアウトに役立ちます。

Offset classes

.offset-md-* classesを使用して、columnsを右に移動します。これらのclassesは、columnの左marginを* columns分だけ増やします。例えば、.offset-md-4は.col-md-4を4つのcolumns分だけ移動します。

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

レスポンシブbreakpointsでのcolumnクリアに加えて、offsetをリセットする必要がある場合があります。gridの例でこれの動作を確認してください。

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

Margin utilities

v4でflexboxに移行したことで、.me-autoのようなmargin utilitiesを使用して、兄弟columnsを互いに離すことができます。

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

スタンドアロンのcolumn classes

.col-* classesは、.rowの外でも使用して、要素に特定の幅を与えることができます。column classesがrowの直接の子以外として使用される場合、paddingsは省略されます。

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

classesはutilitiesと一緒に使用して、レスポンシブなフロート画像を作成できます。テキストが短い場合にフロートをクリアするために、コンテンツを.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>