Loading...

一覧へ

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からぜひお問い合わせください!

詳細はコチラ!

お待ちしています。

一覧へ