Bootstrapの等高カラム完全ガイド！初心者でもできるカードグリッドと高さ揃えの基本

等高カラムの作り方：カードグリッドと高さ揃えの実践パターン

先生と生徒の会話形式で理解しよう

生徒

「Bootstrapでカードを横に並べたら、高さがバラバラになってしまいました…」

先生

「それは“等高カラム”ができていない状態ですね。Bootstrapには簡単に高さを揃える方法があります。」

生徒

「そもそも等高カラムって何ですか？」

先生

「箱を横に並べたとき、全部同じ高さになるレイアウトのことです。カード表示でよく使いますよ。」

1. 等高カラムとは何かを超かんたんに理解しよう

等高カラムとは、横に並んだ複数の箱の高さをすべて同じにそろえるレイアウトのことです。たとえば、本棚に本を並べたとき、高さがそろっていると見た目がきれいですよね。それと同じ考え方です。

Bootstrapでは、カードレイアウトや商品一覧、ブログ記事一覧などで、この等高カラムがよく使われます。高さがバラバラだと、初心者が作ったページに見えやすくなってしまいます。

2. なぜBootstrapで高さがバラバラになるのか

Bootstrapのグリッドは、横幅は自動でそろえてくれますが、高さまでは自動でそろえてくれません。中に入っている文章の量や画像の大きさが違うと、その分だけ高さも変わります。

これは、ダンボール箱に物を入れるのを想像すると分かりやすいです。たくさん入れた箱は高くなり、少ない箱は低くなります。HTMLも同じで、中身の量が高さに影響します。

3. 一番かんたんな等高カラムの作り方

Bootstrapで等高カラムを作る一番簡単な方法は、フレックスレイアウトを使うことです。フレックスとは、横並びや高さ揃えを得意とする仕組みです。


<div class="container">
    <div class="row d-flex">
        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title">カード1</h5>
                    <p class="card-text">短い文章</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title">カード2</h5>
                    <p class="card-text">少し長めの文章が入ります。</p>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="card h-100">
                <div class="card-body">
                    <h5 class="card-title">カード3</h5>
                    <p class="card-text">とてもとても長い文章がここに入っても、高さがそろいます。</p>
                </div>
            </div>
        </div>
    </div>
</div>

ブラウザ表示

ポイントは、rowにd-flexを付けて、カードにh-100を付けているところです。これだけで高さがそろいます。

4. カードグリッドで等高カラムを作る実践例

カードグリッドとは、カードをタイルのように並べるレイアウトです。商品一覧やサービス紹介でよく使われます。


<div class="container">
    <div class="row g-3 d-flex">
        <div class="col-sm-6 col-lg-3">
            <div class="card h-100">
                <img src="/img/sample150-100.jpg" class="card-img-top">
                <div class="card-body">
                    <p>商品Aの説明</p>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3">
            <div class="card h-100">
                <img src="/img/sample150-100.jpg" class="card-img-top">
                <div class="card-body">
                    <p>商品Bの説明が少し長めです。</p>
                </div>
            </div>
        </div>
    </div>
</div>

ブラウザ表示

画像が入っていても、カード全体の高さはそろいます。これがBootstrapの等高カラムの強みです。

5. 高さ揃えでよく使うクラスの意味

ここで使ったクラスは初心者でも覚えておくと便利です。d-flexは「横に並べて高さを調整する準備」、h-100は「親の高さに合わせて伸びる」という意味です。

専門用語に聞こえますが、「みんな同じ身長になるように背伸びする」と考えるとイメージしやすいです。

6. ボタン位置を下にそろえる応用パターン

等高カラムを使うと、カード内のボタン位置もきれいにそろえられます。


<div class="card h-100 d-flex">
    <div class="card-body d-flex flex-column">
        <p>説明文がここに入ります。</p>
        <a href="#" class="btn btn-primary mt-auto">詳しく見る</a>
    </div>
</div>

ブラウザ表示

mt-autoは「自動で下に押し下げる」という意味で、ボタンがカードの下にそろいます。