基本

Bootstrapグリッドシステム

Bootstrapのグリッドシステムでは、ページ全体で最大12の列が使用できます。
12列すべてを個別に使用したくない場合は、列をグループ化して幅の広い列を作成することができます。

Bootstrapのグリッドシステムは画面サイズに応じて列が自動的に再配置されます。

グリッドクラス

Bootstrapグリッドシステムには4つのクラスがあります。

• xs（電話機用）
• sm（タブレット用）
• md（デスクトップ用）
• lg（大型デスクトップの場合）

上記のクラスは、よりダイナミックで柔軟なレイアウトを作成するために組み合わせることができます。

基本的な構造

Bootstrapグリッドの基本構造は次のとおりです。

<div class="row">
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  ...
</div>

最初に行を作成します（ <div class="row"> ）。
次に、必要な数の列（適切な .col-*-* クラスを持つタグ）を追加します。
.col-*-* の数値は、各行に対して常に最大12になるようにする必要があることに注意してください。

以下では、基本的なBootstrapグリッドレイアウトの例をいくつか紹介します。

3カラムレイアウト

<div class="row">
  <div class="col-xs-4">.col-xs-4</div>
  <div class="col-xs-4">.col-xs-4</div>
  <div class="col-xs-4">.col-xs-4</div>
</div>

2カラムレイアウト

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

今回は xs を指定しましたので、スマートフォンなどの小さい画面で表示してもレイアウトは横に並びます。
これを md で指定すると以下のようになります。

3カラムレイアウト(md)

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>

デスクトップで見られている方はカラムが横にレイアウトされているはずです。
しかしスマートフォンで見た場合はカラムが縦に配置されます。

デスクトップで見られている方はウィンドウを小さくしてみてください。カラムが縦並びに再配置されます。