Bootstrapで横スクロールのカード（カルーセルっぽい奴）を作る方法

まずGoogleのモバイル検索結果のような横スクロールできるカードを作りたいとき、なんて検索したらいいか分からなかった。カルーセル≒スライドショーなので、おそらく厳密にはカルーセルとは言わない。どちらかというとoverflowというCSSプロパティ名で呼ばれたり検索されたりすることが多いようだ。

Bootstrapに備わっているflex-row, flex-nowrap, overflow-autoクラスを使う。

<div class="row flex-row flex-nowrap overflow-auto">
    <div class="col-6">
        <div class="card card-block h-100">
            Card 1
        </div>
    </div>
    <div class="col-6">
        <div class="card card-block h-100">
            Card 2
        </div>
    </div>
</div>

col-6は12カラム中6カラムの横幅、h-100は各カードの高さを揃えるための高さ100％という意味。

参考

https://www.it-swarm.dev/ja/css/bootstrap%e3%81%ae%e3%82%ab%e3%83%bc%e3%83%89%e3%81%ae%e6%b0%b4%e5%b9%b3%e6%96%b9%e5%90%91%e3%81%ab%e3%82%b9%e3%82%af%e3%83%ad%e3%83%bc%e3%83%ab%e5%8f%af%e8%83%bd%e3%81%aa%e3%83%aa%e3%82%b9%e3%83%88/823784408/

https://getbootstrap.com/docs/4.4/utilities/overflow/

https://getbootstrap.com/docs/4.4/components/card/#card-layout