【Bootstrap】均等な四角枠や写真を並べる方法

四角いサムネイル画像やコメントカードを画像サイズや文章の長さによらず、均等の大きさで並べる方法を記載します。

この記事はBootstrap5を利用して簡単に設定できるようにします。

とりあえずこのやり方で出来る

Bootstrapには、カードと呼ばれるブロックを使用する方法と、ボーダーで囲む方法の2種類を紹介します。

カードを使用する方法

<div class=".container-lg">
        <div class="row row-cols-1 row-cols-md-3 g-4">
                <div class="col">
                    <div class="card h-100">
                        <h5 class="card-header">カードのヘッダーをここに記載</h5>
                        <img src="image.png(画像リンク先)" class="img-thumbnail" loading="lazy">
                        <div class="card-body">
                            <p class="card-text">　カードの文章</p>
                            <h6 class="card-title">カードのタイトル</h6>
                        </div>
                    </div>
               </div>
       </div>
</div>

ボーダーで囲むことで行う場合。