Bootstrap4を使ってCSSだけでコンテンツの高さを揃える
カードデザインでカードの高さを合わせたい時ってありますよね。意外と大変なコンテンツの高さ合わせ。ちょっと前まではJSを駆使しないといけませんでした。
実際にBootstrap3を使っているHowMaでも、jQueryプラグインのequalizerを利用してカードデザインの高さを合わせています。そんなコンテンツの高さ合わせですが、Bootstrap4を使えばCSSだけで超簡単に実現できてしまいます！！
Bootstrap4の導入
公式のドキュメントに記載されているとおりですが、CDNのリンクを読み込むだけでOKです。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
高さを揃える方法
レスポンシブデザインで多用するgrid systemを使って、1コンテンツ1colで組んでいきます。それをrowで囲います。
Bootstrap4だと、なんとこれだけで高さが揃ってしまいます！（v3までしか知らない人はビックリですね）なぜそうなるかというと、v4ではrowがdisplay:flexになっています。
flexはデフォルトで子要素の高さが揃うようになっているので、指定してあげるだけでこうなっちゃいます。一点ポイントを上げるなら、colの子要素にh-100（height:100%のクラス）を入れてあげることでしょうか。