Bootstrap4を使ってCSSだけでコンテンツの高さを揃える
こんにちは。
コラビットのソネ（@_kok____）です。
今回はとてもとても便利なBootstrapを使ったTipsを紹介します。
Bootstrap4を使ってCSSだけでコンテンツの高さを揃える
カードデザインでカードの高さを合わせたい時ってありますよね。
意外と大変なコンテンツの高さ合わせ。ちょっと前まではJSを駆使しないといけませんでした。
実際にBootstrap3を使っているHowMaでも、jQueryプラグインのequalizerを利用してカードデザインの高さを合わせています。
そんなコンテンツの高さ合わせですが、Bootstrap4を使えばCSSだけで超簡単に実現できてしまいます！！
ちなみに弊社のプロダクトだと、HowMaスマート不動産売却のトップページでBootstrap4が使われています。
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で囲います。
See the Pen jxQoEL by ksone (@ksone) on CodePen.
Bootstrap4だと、なんとこれだけで高さが揃ってしまいます！（v3までしか知らない人はビックリですね）
なぜそうなるかというと、v4ではrowがdisplay:flexになっています。
flexはデフォルトで子要素の高さが揃うようになっているので、指定してあげるだけでこうなっちゃいます。
一点ポイントを上げるなら、colの子要素にh-100（height:100%のクラス）を入れてあげることでしょうか。
row, colを使わない方法
d-flexクラスを指定すれば子要素の高さが揃います。
また、align-items-*もしくは子要素でalign-self-*を指定すればいろいろな揃え方を実現できます。
例えば、endに合わせると棒グラフのような配置ができます。
See the Pen ZomNoV by ksone (@ksone) on CodePen.
最後に
コラビットは現在エンジニアを募集しています！
- webサービスを作りたい！
- AIを作りたい、学びたい！
- 未経験だけどモノづくりが大好き！プログラミングを仕事にしたい！
な方は当HPからぜひお問い合わせください！
お待ちしています。