Bootstrapカードの使い方
情報を美しく整理するコンポーネント
Bootstrapのカードコンポーネントは、画像・テキスト・ボタンなどをまとめて表示する万能なUIパーツです。
商品一覧、ブログ記事一覧、ダッシュボードなど、さまざまな場面で活用できます。
こんな人向けの記事です
- 情報をカード形式で表示したい
- Bootstrap のカードコンポーネントの使い方を知りたい
- カードを横並びにしてレスポンシブ対応したい
Step 1基本のカード
最もシンプルなカードは card と card-body だけで作れます。
HTML
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">カードタイトル</h5>
<p class="card-text">カードの本文テキストです。ここに説明文を入れます。</p>
<a href="#" class="btn btn-primary">詳しく見る</a>
</div>
</div>| クラス | 役割 |
|---|---|
card | カードの外枠（ボーダーと角丸） |
card-body | カード内のパディング付きエリア |
card-title | タイトル用のスタイル |
card-text | 本文テキスト用のスタイル |
Step 2画像付きカード
card-img-top を使うと、カードの上部に画像を配置できます。
HTML
<div class="card" style="width: 18rem;">
<img src="image.jpg" class="card-img-top" alt="画像の説明">
<div class="card-body">
<h5 class="card-title">画像付きカード</h5>
<p class="card-text">画像の下に説明文を配置できます。</p>
</div>
</div>画像の位置を変えるクラス
card-img-top → 画像を上部に配置card-img-bottom → 画像を下部に配置card-img-overlay → 画像の上にテキストを重ねる
Step 3ヘッダー・フッター付きカード
card-header と card-footer でカードの上下に帯を追加できます。
おすすめ
特集記事
ヘッダーとフッター付きのカードです。
最終更新: 2日前
HTML
<div class="card">
<div class="card-header">おすすめ</div>
<div class="card-body">
<h5 class="card-title">特集記事</h5>
<p class="card-text">ヘッダーとフッター付きのカードです。</p>
</div>
<div class="card-footer text-muted">最終更新: 2日前</div>
</div>Step 4カードを横並びにする
グリッドシステムと組み合わせて、カードをレスポンシブに横並びにできます。
HTML
<div class="container">
<div class="row">
<div class="col-12 col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">カード1</h5>
<p class="card-text">1つ目のカードです。</p>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">カード2</h5>
<p class="card-text">2つ目のカードです。</p>
</div>
</div>
</div>
<div class="col-12 col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">カード3</h5>
<p class="card-text">3つ目のカードです。</p>
</div>
</div>
</div>
</div>
</div>カードの高さを揃えるには
card に h-100 クラスを追加すると、同じ行のカードの高さが揃います。<div class="card h-100">
Step 5カードのスタイルバリエーション
背景色やボーダー色を変更して、カードの見た目をカスタマイズできます。
| クラス | 効果 |
|---|---|
bg-primary text-white | 青背景 + 白文字 |
bg-success text-white | 緑背景 + 白文字 |
bg-warning | 黄背景 |
bg-danger text-white | 赤背景 + 白文字 |
border-primary | 青ボーダー |
border-success | 緑ボーダー |
HTML
<!-- 背景色付きカード -->
<div class="card bg-primary text-white">
<div class="card-body">
<h5 class="card-title">重要なお知らせ</h5>
<p class="card-text">背景色付きのカードです。</p>
</div>
</div>
<!-- ボーダー色付きカード -->
<div class="card border-success">
<div class="card-body text-success">
<h5 class="card-title">成功</h5>
<p class="card-text">ボーダー色を変えたカードです。</p>
</div>
</div>まとめ
Bootstrapのカードは、あらゆるコンテンツを整理して表示するための汎用コンポーネントです。
card+card-bodyが最小構成card-img-topで画像を追加card-header/card-footerで帯を追加- グリッドシステムと組み合わせて横並びに
bg-*やborder-*でスタイルをカスタマイズ