Bootstrap 5 カード

カード

Bootstrap 5のカードは、枠付きのボックスで、その内容の周りに少し内余白があります。ヘッダー、フッター、コンテンツ、色などのオプションを含んでいます。

基本的なカード

基本的なカードは、 .card クラスで作成された、カードのコンテンツには、 .card-body クラス：

例

<div class="card">
  <div class="card-body">基本的なカード</div>
</div>

自分で試してみる

ヘッダーとフッター

.card-header タイトルをカードに追加するためのクラスは、.card-footer フッターをカードに追加するためのクラスは、

例

<div class="card">
  <div class="card-header">ヘッダー</div>
  <div class="card-body">コンテンツ</div>
  <div class="card-footer">フッター</div>
</div>

自分で試してみる

コンテキストカード

カードに背景色を追加するには、以下のコンテキストクラスを使用してください：

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

例

自分で試してみる

タイトル、テキスト、リンク

使用してください、 .card-title カードのタイトルを任意のタイトル要素に追加します。もし、 <p> 要素は、 .card-body 最後の子要素（または唯一の子要素）があれば、 .card-text を除去するクラス： <p> の要素の下部マージン.card-link 任意のリンクに青色とホバーエフェクトを追加します。

例

<div class="card">
  <div class="card-body">
    <h4 class="card-title">カードタイトル</h4>
    <p class="card-text">いくつかの例文。いくつかの例文。</p>
    <a href="#" class="card-link">カードリンク</a>
    <a href="#" class="card-link">別のリンク</a>
  </div>
</div>

自分で試してみる

カード画像

を追加する： .card-img-top または .card-img-bottom を追加する： <img>、画像をカードの上部または下部に配置できます。

注意：.card-body の外に画像を追加して全体の幅を覆うようにしています：

例

<div class="card" style="width:400px">
  <img class="card-img-top" src="avatar.png" alt="カード画像">
  <div class="card-body">
    <h4 class="card-title">ビル・ゲイツ</h4>
    <p class="card-text">ビル・ゲイツはプログラマーやエンジニアです。いくつかの例文。いくつかの例文。</p>
    <a href="#" class="btn btn-primary">プロフィールを表示</a>
  </div>
</div>

自分で試してみる

カード画像オーバーレイ

画像をカードの背景に変換し、使用する： .card-img-overlay 画像の上にテキストを追加する：

例

<div class="card" style="width:500px">
  <img class="card-img-top" src="avatar.png" alt="カード画像">
  <div class="card-img-overlay">
    <h4 class="card-title">ビル・ゲイツ</h4>
    <p class="card-text">いくつかの例文。いくつかの例文。</p>
    <a href="#" class="btn btn-primary">プロフィールを表示</a>
  </div>
</div>

自分で試してみる