Bootstrapのカードとは？

公式サイトでは、こんな感じでHTMLを記述すると、こんなカッコイイカードが作れるよ！っと説明されていました。

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

▼できあがるカード

ほぉ・・・カッコよ💛

カードを横に3つ並べてみよう！

そんなわけで、上記HTML分をコピペして3つつなげたところ、カードが縦に3つ並びました。
ぃゃ💦そうじゃない！！！
私はカードを横に3つ並べたかったの！

ぐぬぬっという気持ちを抑えつつ、GTP先生やグーグル先生に色々聞いて、コードをあれやこれやしたけど一向に横に並ばないカードたち。

解決方法は公式に書いてあった

1時間ぐらいネットをさまよった結果、Bootstrapの公式にこのようなことが書いてありました。

.card-deckを廃止し、グリッドを採用しました。カードをカラムクラスでラップし、親となる.row-cols-*コンテナを追加することで、カードデッキを再>現できます（ただし、レスポンシブな配置をより制御できます）。

え・・・グリッド使えばよかったん！？
以下のようにグリッドを設定することでカードが3つ横に並んでくれました＞＜

<div class="row">
    <!--カード１-->
    <div class="col">
        <div class="card"">
            <img src="https://placehold.jp/150x100.png" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">🐶わんわん</h5>
                <p class="card-text">ワンコがたくさんいる世界にいきたい</p>
            </div>
        </div>
    </div>
    <!--カード２-->
    <div class="col">
        <div class="card"">
            <img src="https://placehold.jp/150x100.png" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">🐈にゃーん</h5>
                <p class="card-text">ぬこが丸くなって寝てる姿に癒される</p>
            </div>
        </div>
    </div>
    <!--カード３-->
    <div class="col">
        <div class="card"">
            <img src="https://placehold.jp/150x100.png" class="card-img-top" alt="...">
            <div class="card-body">
                <h5 class="card-title">🐤カルガモ</h5>
                <p class="card-text">近所の池にたくさんいる。</p>
            </div>
        </div>
    </div>
</div>

▼3つカードが並んだ！

いないかもしれないけど、同じようなことで悩んでいる方がいれば・・・