Bootstrapで横並びのカラムの高さを揃える方法！

Bootstrapで横並びのカラムの高さを揃える方法を解説します。

以下のサンプルコードをご覧ください。

このようにテキストの長さによって背景色の高さが揃っていません。

このような場合のCSSを使わない対処法を解説します。

まず前提条件として、Bootstrapのグリッドを使用するとrowクラスの中のcolは高さが揃います。

以下のサンプルコードをご覧ください。

この状態から、rowクラスのcolクラスにmarginプロパティなどをつけると、グリッドの性質上ずれることになっています。

そこで、子要素に対してmarginプロパティを指定すると背景色の高さは揃いません。この問題を解決するには子要素にh-100クラスを付け加えて調整します。

そうすることで子要素のheightプロパティが100%になり高さが揃います。

もちろんCSSでheightプロパティに直接100%を指定しても調整することができます。