Bootstrap card 横並び ならない

Bootstrap カードを横に並べられない？解決策はこちら！

Bootstrap を使う際、カードコンポーネントを横に並べようとして苦労するケースは少なくありません。この記事では、Bootstrap カードを横に並べる際のよくある問題とその効果的な解決策をご紹介します。

1. Bootstrap グリッドシステムの理解

Bootstrap のグリッドシステムは Flexbox をベースにしており、デフォルトでは各行が 12 列に分割されています。カードを横に並べるには、同じ .row 要素内に配置し、.col-* クラスを使って各カードが占める列数を指定する必要があります。例えば、2 つのカードを行の中央に配置するには、.col-md-6 クラスを使用します。

2. よくある問題と解決策

2.1 問題 1: カードが自動的に改行される

  • 原因: カードはデフォルトで全行幅 (.col-12) を占めます。
  • 解決策: .col-* クラスを使って各カードに適切な列数を指定します。例えば、2 つのカードを横に並べる場合は、それぞれに .col-md-6 を指定します。

2.2 問題 2: カード間にスペースがない

  • 原因: Bootstrap グリッドシステムはデフォルトで列間のスペースがありません。
  • 解決策:
    • .row 要素に .gx-* クラスを追加して列間のスペースを設定します。例えば、.gx-3 は列間に 3 のスペースを追加します。
    • 各 .col-* 要素に .ms-* または .me-* クラスを追加して、左側または右側のスペースを設定します。

2.3 問題 3: レスポンシブレイアウトの問題

  • 原因: 画面サイズが異なる場合、カードの配置が想定どおりにならないことがあります。
  • 解決策:
    • .col-* クラスにブレークポイントを指定します。例えば、.col-md-6 .col-lg-4 は、中程度の画面サイズでは 2 列、大きな画面サイズでは 3 列にカードを配置します。
    • Bootstrap グリッドシステムの他のクラス、例えば .row-cols-* や .col-auto を使用して、より柔軟なレイアウトを実現します。

3. コード例

以下は、Bootstrap グリッドシステムを使用してカードを横に並べ、一般的な問題を解決する方法を示す完全なコード例です。


<div class="container">
    <div class="row gx-3">
        <div class="col-md-6 col-lg-4">
            <div class="card">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">カードタイトル</h5>
                    <p class="card-text">カードの内容...</p>
                    <a href="#" class="btn btn-primary">詳細</a>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-lg-4">
            <div class="card">
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">カードタイトル</h5>
                    <p class="card-text">カードの内容...</p>
                    <a href="#" class="btn btn-primary">詳細</a>
                </div>
            </div>
        </div>
    </div>
</div>

4. まとめ

この記事では、Bootstrap グリッドシステムを使用してカードを横に並べる方法、そしてよくある問題とその解決策について解説しました。グリッドシステムを適切に活用することで、様々な画面サイズに対応した柔軟なレイアウトを簡単に実現できます。ぜひ、様々なオプションを試して、ニーズに合ったレイアウトを作成してみてください。

参考文献

関連QA

質問 回答
カードを縦に並べるにはどうすればよいですか？ .col-* クラスの代わりに、.row-cols-* クラスを使用して、各行に配置するカードの数を指定します。
カードのサイズを変更するにはどうすればよいですか？ .card クラスに独自のCSSを追加するか、Bootstrap のユーティリティクラス (.w-25、.h-50 など) を使用して、幅と高さを調整します。
カードを中央揃えにするにはどうすればよいですか？ .row クラスに .justify-content-center クラスを追加します。

その他の参考記事:bootstrap card 横並び