Bootstrapのcardで高さを統一したい

Question

Bootstrapのcardを使ってコンテンツを並べていますが、現在はコンテンツのテキスト量によって高さがまちまちになってしまうので、高さをそろえたいです。

https://dot-blog.jp/news/bootstrap4-card-deck-width-adjustment/
↑こちらを参考に、cardのdivにh-100をセットしましたがうまく行きません…
つながってしまいました…

以下、htmlです。アドバイスいただけますと幸いです。

html

<div id="wrapper">
                <div class="mt-4 mb-4">
                    <h1 class="HalfSingle"><i class="fas fa-book-open h1-icon fa-fw"></i> シナリオ一覧</h1>
                </div>
                <div>
                    <button type="button" onclick="location.href='add.php'" class="btn btn-add">新規作成</button>
                </div>
                <div class="error" id="result"></div>
                <div class="card-deck">
                <div class="row p-3 row-eq-height">
                    <?php if($rec): 
                        foreach($rec as $rec_one):?>
                    <div class="col-md-4">
                        <div class="mt-4 mb-4 card border-0 h-100">
                            <div class="p-3">
                                <a href="edit.php?id=<?php h($rec_one["id"]); ?>" class="card-body">
                                    <h5 class="card-title"><?php h($rec_one["name"]) ?></h5>
                                    <h6 class="card-subtitle mb-2 mt-4 text-muted">[更新]<?php h($rec_one["updated_at"]) ?></h6>
                                    <p class="card-text"><?php h($rec_one["memo"]) ?></p>
                                </a>
                            </div>
                        </div>
                    </div>
                        <?php
                        endforeach;
                    endif; ?>
                </div>
                </div>
                
            </div>

ちなみに、bootstrapは

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> を使用しております。

Answer 1

<div class="mt-4 mb-4 card border-0 h-100">の親要素の<div class="col-md-4">に、
上下のpaddingを指定すると上下の余白がなくつながってしまうという問題は解決しそうです。

/* すべての「.col-md-4」に適用されてしまうので、できれば「.xxxx .col-md-4」などのCSSセレクタにしたい。 */
.col-md-4 {
  padding-top: 15px;
  padding-bottom: 15px;
}

複数のカードのまとまりの、上下の余白が気になるなら該当箇所の.rowに
margin-top: -15px;とmargin-bottom: -15px;を指定すると余白が相殺されると思われます。

---

解説:
Bootstrapのcol-xx-xは、横方向のpaddingは指定されていますが、縦方向のpaddingは指定されていません。以下の公式サイトも、標準のcol-xx-xのCSS指定とは別に、padding-topとpadding-bottomをしています。

参考URL:
https://getbootstrap.com/docs/4.5/layout/grid/

Comments

[mikeko0901]

ありがとうございます！いただきましたcss設定でできました。
解説までつけていただき、助かりました。