Bootstrap4でのGrid system変更点〜Flexがポイント

Bootstrapでは12等分のカラムでグリッドを作成するGrid systemが用意されています。また、レスポンシブレイアウトにも柔軟に対応できる仕組みのため、複雑なレイアウトを簡単にコーディングすることができます。
Bootstrap4ではこのグリッドシステムの仕組みにFlexが採用されており、Bootstrap3と比較して変更が出ています。
Flexの仕組みを理解していればクラスの使い方も納得がいくものです。単純にクラスをコピペで使うのではなくCSSで何を行なっているのかしっかり理解しておくと良いでしょう。

Bootstrap3のグリッドシステムの使い方は「Bootstrapの使い方（２）〜グリッドシステム」を参考にしてください。

Bootstrap3では、カラムを作成する「.col-**-*」はCSSで「float: left」の指定とwidthでパーセンテージの幅設定で構成されていました。つまりfloatによるレイアウトでした。
簡単な例は次のようになります。これだけで２カラムのレイアウトができます。

<div class="col-sm-6">ここにテキスト</div>
<div class="col-sm-6">ここにテキスト</div>

Bootstrap4ではfloatのレイアウトに変わってFlexによるレイアウトが採用されています。
そのため、上記のような記述では横並びになってくれません。

Bootstrap3からBootstrap4で変更されたグリッドシステム関連のCSS

それぞれのバージョンのCSSの確認をしたら次の通りです。

Bootstrap3の「col-sm-6」のCSS概要（実際はもっと詳細な記述ですが、わかりやすいように一部変更と省略をしています）

.col-sm-6 {
  float: left;
  width: 50%;
}

floatの指定とwidthの指定はフロートの基本的な記述です。

Bootstrap4の「col-sm-6」のCSS概要（実際はもっと詳細な記述ですが、わかりやすいように一部変更と省略をしています）

.col-sm-6 {
  width: 100%;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

こちらはflexプロパティを使って幅のサイズを決めています。
ポイントはこのクラス「col-sm-6」にはflexアイテムの設定があるだけで、これだけではFlexBoxの仕組みは機能しません。
親要素に当たるflexコンテナにdisplay:flexの設定が必須になります。
flexコンテナに指定するdisplay:flexの設定がなければそもそもFlexBoxの機能は使えません。
Bootstrap4では必ずflexコンテナとflexアイテムの関係をしっかりと考慮しておく必要があります。
Bootstrap4で正しく横並びのカラムを作成する場合はグリッド用のクラス名「col-sm-6」などを使用するだけではなく、その親要素に「d-flex」クラスをつけておく必要があります。

.d-flexのCSS内容

.d-flex {
  display: -ms-flexbox !important;
  display: flex !important;
}

または、いわゆる行を表すクラスでBootstrap3から存在した「row」クラスを使用することでも解決できます。
Bootstrap3の「row」クラスは次のような内容で、左右の余白をとるだけのデザイン的な意味合いのあるものでした。

.row {
  margin-right: -15px;
  margin-left: -15px;
}

けれどもBootstrap4では次のようになっています。つまり「.row」がflexコンテナになり、その中のカラムがflexアイテムになるという構造です。構造から見てもBootstrap4では必ず「.row」を使用するようにしておいた方が良いでしょう。

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

• FlexBoxの使い方は「FlexBoxの使い方（１）〜display:flexについて」を参照ください。
• flexプロパティの使い方は「FlexBoxの使い方（５）〜flexプロパティについて」参照ください。

Bootstrap4グリッドシステムの使い方