[Bootstrap]水平方向(横)のカード

突貫で作ったブログだったので、他から持ってきたコードをを使っていたのですが、メンテナンス性が悪いのと微妙なので

Cards · Bootstrap v5.3
https://getbootstrap.com/docs/5.3/components/card/#horizontal

公式にコンポーネントがあったのは知らなかったｗ

HTML

<div class="card mb-3" style="max-width: 100%;">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6hObGjorRkgRBzpTtacMqzc5h78JhdqaXQ1HqVvl98D6ViQPFYvkD0krPH4fdmd2WM3j6YTVPW8USsOfI5MFS_YBXZQ5W6sOq1V1_SN2R-wUKXv47C27f7uagws4mV2ZW9ORwW6iuVahn7ZkzXiRRdwTUUXHkpyBiz1MXB2XB5YQXosMtrlXngPZqrxgc/s0/magicstudio-art%20-%202025-10-28T183700.414.jpg" class="img-fluid rounded-start" alt="...">
    </div>
    <div class="col-md-8">
      <div class="card-body">
        <h3 class="card-title">Card title</h3>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

100パーにしてマージンを入れています(元はbottomだけ)

結果のようなもの

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

col-md-6

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago