Bootstrapで横スクロールのカード(カルーセルっぽい奴)を作る方法
![](https://images.microcms-assets.io/assets/1e891de6183b44ccaa6115e3689e21c2/073dc280baa448c6977cc6a544a511ac/2020_08_58ccdc981b0c34f513cbbdf808d93e4f-166x300.png)
まず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://images.microcms-assets.io/assets/1e891de6183b44ccaa6115e3689e21c2/26ff4cfcf35c4e1a832335232fc7e654/2020_08_849ccba610b63365dc57fcb9584aa624-263x300.png)
参考
https://getbootstrap.com/docs/4.4/utilities/overflow/
https://getbootstrap.com/docs/4.4/components/card/#card-layout