Grid system

Grid system(グリッドシステム)は,12カラムのシステムと,5段階のレスポンシブ,Sassとmixin,いくつかの定義されたクラスですべての図形とサイズのレイアウトを作成可能です

How it works

グリッドシステムは containers, rows, columns でレイアウトと整列を行う。これは flexbox で構築されている。
下記にグリッドの例をしめす。

flexboxは Read this CSS Tricks flexbox guide を参考にしてください。

One of three columns

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

上記の例では, 定義済みのグリッドクラスを使用して , small, medium, large, extra large のデバイスで3つの等幅列を作成しています。
列は親要素の .container を持つページの中央に配置されます。

下記の仕様やBugに注意が必要です。

わかりやすく説明すると

コンテナは,サイトのコンテンツを中央に配置し水平に埋め込む手段を提供します。全ての viewport とデバイスサイズにわたって固定幅の .container または全幅の .container-fluid （width: 100%）を使用しています。
行(Rows) で列(columns) を囲みます。各列には, それらの間のスペースを制御するための水平 padding があります。 padding は negative margins で打ち消されます。これによって列内のすべてのコンテンツが視覚的に左側に整列されます。
コンテンツは列内に配置する必要があり, 列(columns)のみを行(Rows)の直下の子にすることが可能です。
Flexboxによって指定された width を持たないグリッド列は自動的に等幅列としてレイアウトされます。4つの列は(小のブレークポイント以上で)自動的に25%の幅になります。そのほかの例は auto-layout columns を参考にできます。
列は行ごとに12のうちから使用したい列の数を示します。3つの等幅列が必要な場合は .col-4 を使用できます。
列の幅 width は, パーセンテージで設定されているので親要素との相対的な値は常に流動的になります。
列には水平方向の padding があり両端に空白を作成しますが .row に .no-gutters を入れれば, 行から margin を削除したり, 列から padding を削除することができます。
グリッドレスポンシブは,5つのグリッドブレークポイントがあります。(extra small, small, medium, large, extra large)
グリッドブレークポイントは, 最小幅のメディアクエリに基づいています。(例 .col-sm-4 は small, medium, large, extra large に適用されますが最初の xsブレークポイントにはなりません)
定義済みのグリッドクラス (例 .col-4 )やSassのmixinも使用可能です。

Grid options

Bootstrapではサイズの定義で em か rem 単位を使用していますが, グリッドのブレークポイントとコンテナ幅には px 単位を使用しています。
viewport の幅が px 単位なのと font size のよって変化しないためです。

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Max container width	None (auto)	540px	720px	960px	1140px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# of columns	12
Gutter width	30px (カラムの両側に15px）
Nestable	Yes
Column ordering	Yes

Auto-layout columns

明示的に番号を付けられたクラス(例 .col-sm-6 )がなければ, 簡単な列サイズ設定のためにブレークポイント固有の列クラスを利用します。

Equal-width

例えば, xs から xl までのすべてのデバイスと viewport に適用される2つのグリッドレイアウトがあった場合に　　ブレークポイントごとに任意の数のないクラスを追加し,すべての列が同じ幅になるようにします。

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Equal-width multi-line

列を改行したい場所に .w-100 を挿入して、複数行の等幅の列を作成できます。
.w-100 と responsive display utilities を組み合わせることでレスポンシブに組むことができます。

Safari flexbox bug によって, flex-basis or border なしではこれが機能しませんでした。
古いバージョンのブラウザーには回避策がありますが, ターゲットのブラウザーがバグのあるバージョンに該当しない場合は必要ありません。

col

<div class="container">
  <div class="row">
    <div class="col">col</div>
    <div class="col">col</div>
    <div class="w-100"></div>
    <div class="col">col</div>
    <div class="col">col</div>
  </div>
</div>

Setting one column width

任意の1列の幅を設定することができます。　　

1 of 3

2 of 3 (wider)

3 of 3

1 of 3

2 of 3 (wider)

3 of 3

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Variable width content

下記のように col-{breakpoint}-auto を適用すると, コンテンツの自然な幅に基づいて列のサイズを設定できます。

1 of 3

Variable width content

3 of 3

1 of 3

Variable width content

3 of 3

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Equal-width multi-row

下記のように .w-100 を適用すると数の行にまたがる等幅の列が作成できます。
.w-100 と responsive display utilities を組み合わせてレスポンシブブレークポイントにもできます。

col

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="w-100"></div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>

Responsive classes

レスポンシブ・レイアウトを構築するための5つの階層が定義されています。(extra small, small, medium, large, extra large)

All breakpoints

デバイスの最小サイズから最大サイズまで同じグリッドの場合は .col および .col-*クラスを使用します。
下記のように特定のサイズの列が必要な場合は番号付きクラスの指定します。

col

col-8

col-4

<div class="row">
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
  <div class="col">col</div>
</div>
<div class="row">
  <div class="col-8">col-8</div>
  <div class="col-4">col-4</div>
</div>

Stacked to horizontal

.col-sm-* を使用すると sm 以上のブレークポイントでは水平に表示できます。
extra small では積み重ねとなります。

col-sm-8

col-sm-4

col-sm

<div class="row">
  <div class="col-sm-8">col-sm-8</div>
  <div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
  <div class="col-sm">col-sm</div>
</div>

Mix and match

各階層に異なるクラスの組み合わせを使用できます。下記を参考にしてください。

.col-12 .col-md-8

.col-6 .col-md-4

.col-6

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-12 col-md-8">.col-12 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-6">.col-6</div>
  <div class="col-6">.col-6</div>
</div>

Gutters

ブレークポイント固有のパディングとマイナスのマージンによってレスポンシブに調整ができます。与えられた行の空白を変更するには .row にマイナスのマージンユーティリティを .col にパディングユーティリティを組み合わせます。

col のpaddingを .px-lg-5 で増やし, 親要素 .row の .mx-lg-n5 でそれを打ち消していている例が下記です。

Custom column padding

<div class="row mx-lg-n5">
  <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
  <div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
</div>

Row columns

レスポンシブな .row-cols-* を使用して, コンテンツとレイアウトを最適にレンダリングする列の数を設定します。通常の .col-* は個々の列（たとえば, .col-md-4 ）に適用されますが, 行列クラスはショートカットとして親 .row に設定されます。

これらの行列クラスを使用して, 基本的なグリッドレイアウトの作成やカードレイアウトの制御ができます。

Column

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Column

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Column

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Column

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Column

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

Sassミックスインで row-cols（） を使用することもできます。

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Alignment

縦と横の列を整列できます。Internet Explorer 10-11 do not support vertical alignment of flex items when the flex container has a min-height as shown below. See Flexbugs #3 for more details.

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>

No gutters

デフォルトのグリッドクラスの列間の空白は .no-gutters で消すことが可能です。
マイナスの margin が .row から削除され, 水平方向の padding がすべての子列から削除されます。

これらの例は下記になります。

列の再定義は, 最初の子列のみに参照され attribute selector でターゲットに指定されます。
列の padding は spacing utilities でカスタマイズが可能です。

端から端までのデザインが必要な場合は .container や .container-fluid を外します。

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

他のすべての定義済みのグリッド（列の幅, レスポンシブ階層, 並べ替えなど）でこれを引き続き使用可能です。

.col-12 .col-sm-6 .col-md-8

.col-6 .col-md-4

<div class="row no-gutters">
  <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

Column wrapping

1つの行に列の合計が12以上で配置されている場合, 余分な列は新しい行に折り返されます。

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

Column breaks

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

.col-6 .col-sm-3

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

responsive display utilities を使用して特定のブレークポントで分割することも可能です。

.col-6 .col-sm-4

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

Reordering

Order classes

.order- を使うと 視覚的に順序 を制御できます。これらのクラスはレスポンシブ対応なので, ブレークポイントで order を設定することが可能です。
5つのグリッド層の 0 から 12 のサポートがされています。

First, but unordered

Second, but last

Third, but first

<div class="container">
  <div class="row">
    <div class="col">
      First, but unordered
    </div>
    <div class="col order-12">
      Second, but last
    </div>
    <div class="col order-1">
      Third, but first
    </div>
  </div>
</div>

.order-first と .order-last を適用していレスポンシブにも対応できます。 order: -1 と order: 13 (order: $columns + 1) を適用してい順序の変更も可能です。 .order-* との組み合わせも可能です。

First, but last

Second, but unordered

Third, but first

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

Offsetting columns

.offset- と margin utilities の2つの方法で空白を作成可能です。グリッドクラスはカラムにマッチするようなサイズとなり, margin を用いて, オフセットの幅を可変できるような簡単なレイアウトが実現できます。

Offset classes

.offset-md-* を使用して列を右に移動できます。これらのクラスは, 列の左余白を * 列だけ増加させます。例えば, .offset-md-4 は4列分 .col-md-4 を移動します。

.col-md-4

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

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

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

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

列のクリアに加えて空白列をリセットする必要があるかもしれません。the grid example

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

Margin utilities

.mr-auto のようなユーティリティを使用して下記のように間を作ることができます。

.col-md-4

.col-md-4 .ml-auto

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

.col-auto .mr-auto

.col-auto

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

Nesting

グリッドでコンテンツをネストすることができます。 .col-sm-* の中に .row と .col-sm-* を追加します。
ネストされたに行には, 最大12サイズ以内の列を含む必要があります。

Level 1: .col-sm-9

Level 2: .col-8 .col-sm-6

Level 2: .col-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-8 col-sm-6">
        Level 2: .col-8 .col-sm-6
      </div>
      <div class="col-4 col-sm-6">
        Level 2: .col-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

Sass mixins

Sass変数とmixinを使用してカスタムでページレイアウトを作成できます。
デフォルトのクラスではレスポンシブ・レイアウトが簡単に行えます。

Variables

変数とマップは, 列の数, 空白の幅の移動を開始するメディアクエリポイントを決定します。下記の定義済みのグリッドクラスとカスタムmixinを生成します。

$grid-columns:      12;
$grid-gutter-width: 30px;

$grid-breakpoints: (
  // Extra small screen / phone
  xs: 0,
  // Small screen / phone
  sm: 576px,
  // Medium screen / tablet
  md: 768px,
  // Large screen / desktop
  lg: 992px,
  // Extra large screen / wide desktop
  xl: 1200px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
);

Mixins

グリッド変数と使用され, グリッド列に対してセマンティックなCSSを生成できます。

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

Example usage

Sass変数やマップを変更する場合は再コンパイルする必要があります。

.example-container {
  width: 800px;
  @include make-container();
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

Main content

Secondary content

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

Customizing the grid

Sass変数とマップを使うと, グリッドクラスをカスタマイズできます。
tiers と media query dimensions の値を変更して, 再コンパイルします。

Columns and gutters

Sass変数によってグリッドの数は修正されます。 $grid-columns は列の幅（パーセント）を生成するために使われます。 $ grid-gutter-widthは空白の幅を設定します。

$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;

Grid tiers

グリッドの数をカスタマイズすることもできます。 $ grid-breakpointsと$ container-max-widthsを次のように更新します。

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

Sass変数やマップを変更する場合は, 変更を保存して再コンパイルする必要があります。そうすることで, 列の幅, オフセット, および順序付けのための, あらかじめ定義されたグリッドクラスの新しいセットが出力されます。また, カスタムブレークポイントを使用するように応答性のある可視性ユーティリティも更新されます。 px（ rem, em, ` %`ではなく）にグリッド値を設定してください。

v4.4