問題を報告するこのページを編集する

カード

カードは、柔軟性と拡張性に優れたコンテンツコンテナです。ヘッダーとフッター、さまざまなコンテンツ、コンテキストに応じた背景色、強力な表示オプションが含まれています。

概要

カードは、可能な限り少ないマークアップとスタイルで構築されていますが、それでも多くの制御とカスタマイズを提供します。フレックスボックスを使用して構築されており、簡単な配置が可能で、他のコンポーネントとよく組み合わされます。

<b-card>は、最初は固定幅を持たないため、親要素の全幅を自然に満たします。これは、スタイルまたは標準的なBootstrap v4のサイズクラスを使用して簡単にカスタマイズできます。

tagプロパティを指定することで、デフォルトのdivルートタグを他のHTML要素に変更できます。

<div>
  <b-card
    title="Card Title"
    img-src="https://picsum.photos/600/300/?image=25"
    img-alt="Image"
    img-top
    tag="article"
    style="max-width: 20rem;"
    class="mb-2"
  >
    <b-card-text>
      Some quick example text to build on the card title and make up the bulk of the card's content.
    </b-card-text>

    <b-button href="#" variant="primary">Go somewhere</b-button>
  </b-card>
</div>

<!-- b-card.vue -->

コンテンツタイプ

カードは、画像、テキスト、リストグループ、リンクなど、さまざまなコンテンツをサポートします。以下は、<b-card>内でサポートされるものの例です。

カードボディ

<b-card>の基本要素は<b-card-body>セクションで、カード内にパディングされたセクションを提供します。

デフォルトでは、<b-card>のコンテンツは自動的に<b-card-body>セクションに配置されます。

<div>
  <b-card class="text-center">
    <div class="bg-secondary text-light">
      This is some content within the default <samp>&lt;b-card-body&gt;</samp> block of the
      <samp>&lt;b-card&gt;</samp> component. Notice the padding between the card's border and this
      gray <samp>&lt;div&gt;</samp>.
    </div>
  </b-card>
</div>

<!-- b-card-body.vue -->

<b-card>でno-bodyプロパティを設定することで、自動的な<b-card-body>セクション（と関連するパディング）を無効にできます。

<div>
  <b-card no-body class="text-center">
    <div class="bg-secondary text-light">
      This is some content without the default <samp>&lt;b-card-body&gt;</samp> section. Notice the
      lack of padding between the card's border and this gray <samp>&lt;div&gt;</samp>.
    </div>
  </b-card>
</div>

<!-- b-card-body-no-body.vue -->

no-bodyを有効にすると、titleプロパティとsub-titleプロパティのコンテンツはレンダリングされません。

no-bodyが設定されている<b-card>コンポーネント内の任意の場所に、<b-card-body>サブコンポーネントを使用して独自のカードボディを配置します。

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

カードタイトルはtitleプロパティで追加され、サブタイトルはsub-titleプロパティで追加されます。タイトルは<b-card-title>サブコンポーネントを使用してレンダリングされ、サブタイトルは<b-card-sub-title>サブコンポーネントを使用してレンダリングされます。

<b-card-text>サブコンポーネントを使用すると、段落テキストをカードに追加できます。カードボディの最後の<b-card-text>の下マージンは自動的に削除されます（CSSを使用）。<b-card-text>内のテキストは、標準的なHTMLタグを使用してスタイルを設定することもできます。

リンクを追加し、.card-linkクラスを<a>タグ（または<b-link>コンポーネント）に追加することで、隣り合わせに配置できます。

<div>
  <b-card title="Card title" sub-title="Card subtitle">
    <b-card-text>
      Some quick example text to build on the <em>card title</em> and make up the bulk of the card's
      content.
    </b-card-text>

    <b-card-text>A second paragraph of text in the card.</b-card-text>

    <a href="#" class="card-link">Card link</a>
    <b-link href="#" class="card-link">Another link</b-link>
  </b-card>
</div>

<!-- b-card-text.vue -->

画像

<b-card>のプロパティimg-srcは、カードの上に画像を配置し、img-altプロパティを使用して、画像のalt属性に配置する文字列を指定します。img-srcプロパティで指定された画像はレスポンシブで、カードの幅が変更されると幅が調整されます。

あるいは、<b-card-img>サブコンポーネントを使用して、<b-card>内に画像を手動で配置することもできます。使用方法については、下記のキッチンスインク例を参照してください。

<div>
  <div>
    <h4>Top and Bottom</h4>
    <b-card-group deck>
      <b-card img-src="https://placekitten.com/1000/300" img-alt="Card image" img-top>
        <b-card-text>
          Some quick example text to build on the card and make up the bulk of the card's content.
        </b-card-text>
      </b-card>

      <b-card img-src="https://placekitten.com/1000/300" img-alt="Card image" img-bottom>
        <b-card-text>
          Some quick example text to build on the card and make up the bulk of the card's content.
        </b-card-text>
      </b-card>
    </b-card-group>
  </div>
  <div class="mt-4">
    <h4>Left and Right (or Start and End)</h4>
    <b-card img-src="https://placekitten.com/300/300" img-alt="Card image" img-left class="mb-3">
      <b-card-text>
        Some quick example text to build on the card and make up the bulk of the card's content.
      </b-card-text>
    </b-card>

    <b-card img-src="https://placekitten.com/300/300" img-alt="Card image" img-right>
      <b-card-text>
        Some quick example text to build on the card and make up the bulk of the card's content.
      </b-card-text>
    </b-card>
  </div>
</div>

<!-- b-card-img.vue -->

**注記:** 左と右の画像の場合、画像が画像よりも背の高いコンテンツを含む場合、高さが「伸びる」ため、.card-img-leftと.card-img-rightクラスに追加のスタイルを適用する必要がある場合があります。画像が左または右に配置されている場合、ヘッダーとフッターはサポートされません。水平カードレイアウトの例の方が、レスポンシブな水平カードを作成する際に柔軟性が高い場合があります。

オーバーレイ画像

ブール型プロパティoverlayを設定することで、画像をカードの背景に配置します。

<div>
  <b-card
    overlay
    img-src="https://picsum.photos/900/250/?image=3"
    img-alt="Card Image"
    text-variant="white"
    title="Image Overlay"
    sub-title="Subtitle"
  >
    <b-card-text>
      Some quick example text to build on the card and make up the bulk of the card's content.
    </b-card-text>
  </b-card>
</div>

<!-- b-card-overlay-img-.vue -->

遅延読み込み画像

<b-card-img-lazy>サブコンポーネントを使用して、画像が視界に入ると遅延読み込みします。<b-card-img-lazy>は、<b-card-img>と同じプロパティと、<b-img-lazy>コンポーネントの多くのプロパティをサポートしています。

header / footerプロパティまたは名前付きスロットを使用して、カード内にオプションのヘッダーと/またはフッターを追加します。header-tagプロパティとfooter-tagプロパティ（どちらもデフォルトはdiv）を設定することで、使用されるラッパー要素タグを制御できます。

<div>
  <b-card-group deck>
    <b-card
      header="featured"
      header-tag="header"
      footer="Card Footer"
      footer-tag="footer"
      title="Title"
    >
      <b-card-text>Header and footers using props.</b-card-text>
      <b-button href="#" variant="primary">Go somewhere</b-button>
    </b-card>

    <b-card title="Title" header-tag="header" footer-tag="footer">
      <template #header>
        <h6 class="mb-0">Header Slot</h6>
      </template>
      <b-card-text>Header and footers using slots.</b-card-text>
      <b-button href="#" variant="primary">Go somewhere</b-button>
      <template #footer>
        <em>Footer Slot</em>
      </template>
    </b-card>
  </b-card-group>
</div>

<!-- b-card-header-footer.vue -->

キッチンスインク例

複数のコンテンツタイプを組み合わせて必要なカードを作成するか、すべてをそこに配置します。以下に示すのは、画像スタイル、ブロック、テキストスタイル、リストグループです。これらはすべて固定幅のカードにラップされています。

<div>
  <b-card
    no-body
    style="max-width: 20rem;"
    img-src="https://placekitten.com/380/200"
    img-alt="Image"
    img-top
  >
    <template #header>
      <h4 class="mb-0">Hello World</h4>
    </template>

    <b-card-body>
      <b-card-title>Card Title</b-card-title>
      <b-card-sub-title class="mb-2">Card Sub Title</b-card-sub-title>
      <b-card-text>
        Some quick example text to build on the card title and make up the bulk of the card's
        content.
      </b-card-text>
    </b-card-body>

    <b-list-group flush>
      <b-list-group-item>Cras justo odio</b-list-group-item>
      <b-list-group-item>Dapibus ac facilisis in</b-list-group-item>
      <b-list-group-item>Vestibulum at eros</b-list-group-item>
    </b-list-group>

    <b-card-body>
      <a href="#" class="card-link">Card link</a>
      <a href="#" class="card-link">Another link</a>
    </b-card-body>

    <b-card-footer>This is a footer</b-card-footer>

    <b-card-img src="https://placekitten.com/480/210" alt="Image" bottom></b-card-img>
  </b-card>
</div>

<!-- b-card-kitchen-sink.vue -->

水平カードレイアウト

グリッドコンポーネント、ユーティリティクラス、個々のカードサブコンポーネントを組み合わせることで、モバイルフレンドリーでレスポンシブな方法でカードを水平にすることができます。

以下の例では、<b-row>のno-guttersプロパティを使用して行グリッドのガターを削除し、<b-col>のmdプロパティを使用して、mdブレークポイントでカードを水平にします。rounded-0クラスは<b-card-img>の角の丸みを削除し、<b-card>のoverflow-hiddenクラスは、カードのborder-radiusに基づいて画像の角を適切にクリップします。カードのコンテンツによっては、さらに調整が必要になる場合があります。

<div>
  <b-card no-body class="overflow-hidden" style="max-width: 540px;">
    <b-row no-gutters>
      <b-col md="6">
        <b-card-img src="https://picsum.photos/400/400/?image=20" alt="Image" class="rounded-0"></b-card-img>
      </b-col>
      <b-col md="6">
        <b-card-body title="Horizontal Card">
          <b-card-text>
            This is a wider card with supporting text as a natural lead-in to additional content.
            This content is a little bit longer.
          </b-card-text>
        </b-card-body>
      </b-col>
    </b-row>
  </b-card>
</div>

<!-- b-card-horizontal.vue -->

テキストバリアント

デフォルトでは、カードは暗いテキストを使用し、明るい背景を想定しています。text-variantプロパティを使用して、内部のテキストの色とカードのサブコンポーネントの色を切り替えることで、それを反転させることができます。次に、暗い背景のバリアントを指定します。

<b-card bg-variant="dark" text-variant="white" title="Card Title">
  <b-card-text>
    With supporting text below as a natural lead-in to additional content.
  </b-card-text>
  <b-button href="#" variant="primary">Go somewhere</b-button>
</b-card>

<!-- b-card-text-variants.vue -->

背景とボーダーのバリアント

カードには、bg-variantプロパティとborder-variantプロパティを使用して、カードの背景色とボーダーの色をすばやく変更するための独自のスタイルが含まれています。より暗いソリッドバリアントでは、text-variantプロパティを設定してテキストの色を調整する必要がある場合があります。

ソリッド

<div>
  <div>
    <b-card-group deck>
      <b-card bg-variant="primary" text-variant="white" header="Primary" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card bg-variant="secondary" text-variant="white" header="Secondary" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card bg-variant="success" text-variant="white" header="Success" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>
    </b-card-group>
  </div>
  <div class="mt-3">
    <b-card-group deck>
      <b-card bg-variant="info" text-variant="white" header="Info" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card bg-variant="warning" text-variant="white" header="Warning" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card bg-variant="danger" text-variant="white" header="Danger" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>
    </b-card-group>
  </div>
  <div class="mt-3">
    <b-card-group deck>
      <b-card bg-variant="light" header="Light" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card bg-variant="dark" header="Dark" text-variant="white" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card header="Default" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>
    </b-card-group>
  </div>
</div>

<!-- b-card-variants.vue -->

ボーダー付き

<div>
  <div>
    <b-card-group deck>
      <b-card
        border-variant="primary"
        header="Primary"
        header-bg-variant="primary"
        header-text-variant="white"
        align="center"
      >
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card
        border-variant="secondary"
        header="Secondary"
        header-border-variant="secondary"
        align="center"
      >
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card border-variant="success" header="Success" align="center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>
    </b-card-group>
  </div>
  <div class="mt-3">
    <b-card-group deck>
      <b-card border-variant="info" header="Info" align="center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card
        border-variant="warning"
        header="Warning"
        header-bg-variant="transparent"
        align="center"
      >
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card
        border-variant="danger"
        header="Danger"
        header-border-variant="danger"
        header-text-variant="danger"
        align="center"
      >
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>
    </b-card-group>
  </div>
  <div class="mt-3">
    <b-card-group deck class="mb-3">
      <b-card border-variant="light" header="Light" class="text-center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>

      <b-card border-variant="dark" header="Dark" align="center">
        <b-card-text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</b-card-text>
      </b-card>
    </b-card-group>
  </div>
</div>

<!-- b-card-border-variants.vue -->

バリアントからクラスへのマッピング

BootstrapVue <b-card>のバリアントは、上記のバリアント名にbg-（ソリッドの場合）またはborder-（ボーダー付きの場合）をプリペンドすることで、Bootstrap v4のカードクラスに直接マッピングされます。

header-bg-variant、header-border-variant、header-text-variant、footer-bg-variant、footer-border-variant、footer-text-variantプロパティを使用して、ソリッドとボーダーのバリアントをカードのヘッダーとフッターに個別に適用することもできます。

<div>
  <b-card
    header="Card Header"
    header-text-variant="white"
    header-tag="header"
    header-bg-variant="dark"
    footer="Card Footer"
    footer-tag="footer"
    footer-bg-variant="success"
    footer-border-variant="dark"
    title="Title"
    style="max-width: 20rem;"
  >
    <b-card-text>Header and footers variants.</b-card-text>
  </b-card>
</div>

<!-- b-card-header-footer-variant.vue -->

支援技術への意味の伝達

色を使用して意味を追加することは、視覚的な指示のみを提供し、スクリーンリーダーなどの支援技術のユーザーには伝えられません。色の意味によって示される情報は、コンテンツ自体から明らかである（例：表示されているテキスト）、または.sr-onlyクラスで非表示にした追加のテキストなど、別の方法で含まれていることを確認してください。

<b-nav>をカードヘッダーに簡単に統合できます。

headerスロットを使用する:

<div>
  <b-card title="Card Title" body-class="text-center" header-tag="nav">
    <template #header>
      <b-nav card-header tabs>
        <b-nav-item active>Active</b-nav-item>
        <b-nav-item>Inactive</b-nav-item>
        <b-nav-item disabled>Disabled</b-nav-item>
      </b-nav>
    </template>

    <b-card-text>
      With supporting text below as a natural lead-in to additional content.
    </b-card-text>

    <b-button variant="primary">Go somewhere</b-button>
  </b-card>
</div>

<!-- card-with-nav-header-slot.vue -->

<b-card-header>サブコンポーネントを使用する

<div>
  <b-card no-body>
    <b-card-header header-tag="nav">
      <b-nav card-header tabs>
        <b-nav-item active>Active</b-nav-item>
        <b-nav-item>Inactive</b-nav-item>
        <b-nav-item disabled>Disabled</b-nav-item>
      </b-nav>
    </b-card-header>

    <b-card-body class="text-center">
      <b-card-title>Card Title</b-card-title>

      <b-card-text>
        With supporting text below as a natural lead-in to additional content.
      </b-card-text>

      <b-button variant="primary">Go somewhere</b-button>
    </b-card-body>
  </b-card>
</div>

<!-- card-with-nav-header-component.vue -->

カードヘッダーで<b-nav>を使用する方法の詳細については、Navs ドキュメントを参照してください。

カードグループ

カード内のコンテンツのスタイル設定に加えて、BootstrapVueには、一連のカードをレイアウトするための<b-card-group>コンポーネントが含まれています。現時点では、これらのレイアウトオプションはまだレスポンシブではありません。

デフォルトのカードグループ

カードグループを使用して、カードを幅と高さが等しい列を持つ単一の接続された要素としてレンダリングします。カードグループは、display: flex;を使用して均一なサイズを実現します。

フッター付きのカードグループを使用する場合、そのコンテンツは自動的に整列されます。

<div>
  <b-card-group>
    <b-card title="Title" img-src="https://placekitten.com/g/300/450" img-alt="Image" img-top>
      <b-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.
      </b-card-text>
      <template #footer>
        <small class="text-muted">Last updated 3 mins ago</small>
      </template>
    </b-card>

    <b-card title="Title" img-src="https://placekitten.com/g/300/450" img-alt="Image" img-top>
      <b-card-text>
        This card has supporting text below as a natural lead-in to additional content.
      </b-card-text>
      <template #footer>
        <small class="text-muted">Last updated 3 mins ago</small>
      </template>
    </b-card>

    <b-card title="Title" img-src="https://placekitten.com/g/300/450" img-alt="Image" img-top>
      <b-card-text>
        This is a wider card with supporting text below as a natural lead-in to additional content.
        This card has even longer content than the first to show that equal height action.
      </b-card-text>
      <template #footer>
        <small class="text-muted">Last updated 3 mins ago</small>
      </template>
    </b-card>
  </b-card-group>
</div>

<!-- b-card-group.vue -->

カードデッキグループ

互いに接続されていない幅と高さが等しいカードのセットが必要ですか？deckプロパティを設定して、カードデッキを使用してください。通常のカードグループと同様に、デッキのカードフッターは自動的に整列されます。

<div>
  <b-card-group deck>
    <b-card title="Title" img-src="https://picsum.photos/300/300/?image=41" img-alt="Image" img-top>
      <b-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.
      </b-card-text>
      <template #footer>
        <small class="text-muted">Last updated 3 mins ago</small>
      </template>
    </b-card>

    <b-card title="Title" img-src="https://picsum.photos/300/300/?image=41" img-alt="Image" img-top>
      <b-card-text>
        This card has supporting text below as a natural lead-in to additional content.
      </b-card-text>
      <template #footer>
        <small class="text-muted">Last updated 3 mins ago</small>
      </template>
    </b-card>

    <b-card title="Title" img-src="https://picsum.photos/300/300/?image=41" img-alt="Image" img-top>
      <b-card-text>
        This is a wider card with supporting text below as a natural lead-in to additional content.
        This card has even longer content than the first to show that equal height action.
      </b-card-text>
      <template #footer>
        <small class="text-muted">Last updated 3 mins ago</small>
      </template>
    </b-card>
  </b-card-group>
</div>

<!-- b-card-group-deck.vue -->

カード列グループ

カードは、columnsプロパティを設定した<b-card-group>でラップすることで、Masonryのような列に編成できます。カードは、より簡単な整列のために、flexboxではなくCSS列プロパティを使用して構築されています。カードは上から下、左から右の順序で配置されます。

ご注意！カード列の動作は環境によって異なる場合があります。カードが列をまたがって分割されるのを防ぐには、`display: inline-block` を設定する必要があります。`column-break-inside: avoid` はまだ完全な解決策ではありません。

<div>
  <b-card-group columns>
    <b-card
      title="Card title that wraps to a new line"
      img-src="https://placekitten.com/g/400/450"
      img-alt="Image"
      img-top
    >
      <b-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.
      </b-card-text>
    </b-card>

    <b-card header="Quote">
      <blockquote class="blockquote mb-0">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <footer class="blockquote-footer">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </footer>
      </blockquote>
    </b-card>

    <b-card title="Title" img-src="https://placekitten.com/500/350" img-alt="Image" img-top>
      <b-card-text>
        This card has supporting text below as a natural lead-in to additional content.
      </b-card-text>
      <b-card-text class="small text-muted">Last updated 3 mins ago</b-card-text>
    </b-card>

    <b-card bg-variant="primary" text-variant="white">
      <blockquote class="card-blockquote">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <footer>
          <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
        </footer>
      </blockquote>
    </b-card>

    <b-card>
      <b-card-title>Title</b-card-title>
      <b-card-text>
        This card has supporting text below as a natural lead-in to additional content.
      </b-card-text>
      <b-card-text class="small text-muted">Last updated 3 mins ago</b-card-text>
    </b-card>

    <b-card img-src="https://picsum.photos/400/400/?image=41" img-alt="Image" overlay></b-card>

    <b-card img-src="https://picsum.photos/400/200/?image=41" img-alt="Image" img-top>
      <b-card-text>
        This is a wider card with supporting text below as a natural lead-in to additional content.
        This card has even longer content than the first.
      </b-card-text>
      <template #footer>
        <small class="text-muted">Footer Text</small>
      </template>
    </b-card>
  </b-card-group>
</div>

<!-- b-card-group-columns.vue -->

コンポーネントリファレンス

<b-card>

関数コンポーネント
ソースコードを見る

プロパティ

すべてのプロパティのデフォルト値はグローバルに設定可能です。

プロパティ
(クリックして昇順にソート)
タイプ
(クリックして昇順にソート)
デフォルト
説明
align
文字列カードの内容のテキスト配置：'left'、'center'、または'right'
bg-variant
文字列Bootstrap テーマカラーバリアントの1つを背景に適用します。
body-bg-variant
文字列Bootstrap テーマカラーバリアントの1つを本文の背景に適用します。
body-border-variant
文字列Bootstrap テーマカラーバリアントの1つを本文の枠線に適用します。
body-class
Array または Object または String本文に適用するCSSクラス(またはクラス群)
body-tag
文字列'div'本文のデフォルトタグの代わりにレンダリングするHTMLタグを指定します。
body-text-variant
文字列Bootstrap テーマカラーバリアントの1つを本文のテキストに適用します。
border-variant
文字列Bootstrap テーマカラーバリアントの1つを枠線に適用します。
footer
文字列フッターに配置するテキストコンテンツ
footer-bg-variant
文字列Bootstrap テーマカラーバリアントの1つをフッターの背景に適用します。
footer-border-variant
文字列Bootstrap テーマカラーバリアントの1つをフッターの枠線に適用します。
footer-class
Array または Object または Stringフッターに適用するCSSクラス(またはクラス群)
footer-html
注意して使用してください 		文字列フッターに配置するHTML文字列コンテンツ
footer-tag
文字列'div'フッターのデフォルトタグの代わりにレンダリングするHTMLタグを指定します。
footer-text-variant
文字列Bootstrap テーマカラーバリアントの1つをフッターのテキストに適用します。
header
文字列ヘッダーに配置するテキストコンテンツ
header-bg-variant
文字列Bootstrap テーマカラーバリアントの1つをヘッダーの背景に適用します。
header-border-variant
文字列Bootstrap テーマカラーバリアントの1つをヘッダーの枠線に適用します。
header-class
Array または Object または Stringヘッダーに適用するCSSクラス(またはクラス群)
header-html
注意して使用してください 		文字列ヘッダーに配置するHTML文字列コンテンツ
header-tag
文字列'div'ヘッダーのデフォルトタグの代わりにレンダリングするHTMLタグを指定します。
header-text-variant
文字列Bootstrap テーマカラーバリアントの1つをヘッダーのテキストに適用します。
img-alt
文字列画像属性'alt'に設定する値
img-bottom
ブール値false画像をカードの下部に表示するかどうかを設定します。
img-end
ブール値false画像をカードの右端に表示するかどうかを設定します。
img-height
数値 または 文字列画像の'height'属性に設定する値
img-left
ブール値false画像をカードの先頭(左)に表示するかどうかを設定します。'left'プロパティの同義語です。
img-right
ブール値false画像をカードの右端に表示するかどうかを設定します。'right'プロパティの同義語です。
img-src
文字列オプションの画像のURL
img-start
ブール値false画像をカードの先頭(左)に表示するかどうかを設定します。
img-top
ブール値false画像をカードの上部に表示するかどうかを設定します。
img-width
数値 または 文字列画像の'width'属性に設定する値
no-body
ブール値falseデフォルトの内部card-body要素のレンダリングを無効にします。
overlay
ブール値false設定すると、(カードに画像がある場合)画像の上にカード本文を重ねます。
sub-title
文字列副題に配置するテキストコンテンツ
sub-title-tag
文字列'h6'副題のデフォルトタグの代わりにレンダリングするHTMLタグを指定します。
sub-title-text-variant
文字列'muted'Bootstrap テーマカラーバリアントの1つを副題のテキストに適用します。
tag
文字列'div'デフォルトタグの代わりにレンダリングするHTMLタグを指定します。
text-variant
文字列Bootstrap テーマカラーバリアントの1つをテキストに適用します。
title
文字列タイトルに配置するテキストコンテンツ
title-tag
文字列'h4'タイトルのデフォルトタグの代わりにレンダリングするHTMLタグを指定します。

注意：HTML文字列をサポートするプロパティ(*-html)は、生のユーザー提供の値が渡されると、クロスサイトスクリプティング(XSS)攻撃に対して脆弱になる可能性があります。最初にユーザー入力を適切にサニタイズする必要があります。

スロット

名前
説明
default カードに配置するコンテンツ
footer フッターコンテンツのカスタムレンダリング用
header ヘッダーコンテンツのカスタムレンダリング用

<b-card-header>

関数コンポーネント
ソースコードを見る

プロパティ

すべてのプロパティのデフォルト値はグローバルに設定可能です。

プロパティ
タイプ
デフォルト
説明
header
文字列ヘッダーに配置するテキストコンテンツ
header-bg-variant
文字列Bootstrap テーマカラーバリアントの1つをヘッダーの背景に適用します。
header-border-variant
文字列Bootstrap テーマカラーバリアントの1つをヘッダーの枠線に適用します。
header-class
Array または Object または Stringヘッダーに適用するCSSクラス(またはクラス群)
header-html
注意して使用してください 		文字列ヘッダーに配置するHTML文字列コンテンツ
header-tag
文字列'div'ヘッダーのデフォルトタグの代わりにレンダリングするHTMLタグを指定します。
header-text-variant
文字列Bootstrap テーマカラーバリアントの1つをヘッダーのテキストに適用します。

注意：HTML文字列をサポートするプロパティ(*-html)は、生のユーザー提供の値が渡されると、クロスサイトスクリプティング(XSS)攻撃に対して脆弱になる可能性があります。最初にユーザー入力を適切にサニタイズする必要があります。

スロット

名前
説明
default カードヘッダーに配置するコンテンツ
関数コンポーネント
ソースコードを見る

すべてのプロパティのデフォルト値はグローバルに設定可能です。

プロパティ
タイプ
デフォルト
説明
footer
文字列フッターに配置するテキストコンテンツ
footer-bg-variant
文字列Bootstrap テーマカラーバリアントの1つをフッターの背景に適用します。
footer-border-variant
文字列Bootstrap テーマカラーバリアントの1つをフッターの枠線に適用します。
footer-class
Array または Object または Stringフッターに適用するCSSクラス(またはクラス群)
footer-html
注意して使用してください 		文字列フッターに配置するHTML文字列コンテンツ
footer-tag
文字列'div'フッターのデフォルトタグの代わりにレンダリングするHTMLタグを指定します。
footer-text-variant
文字列Bootstrap テーマカラーバリアントの1つをフッターのテキストに適用します。

注意：HTML文字列をサポートするプロパティ(*-html)は、生のユーザー提供の値が渡されると、クロスサイトスクリプティング(XSS)攻撃に対して脆弱になる可能性があります。最初にユーザー入力を適切にサニタイズする必要があります。

名前
説明
default カードフッターに配置するコンテンツ

<b-card-body>

関数コンポーネント
ソースコードを見る

プロパティ

すべてのプロパティのデフォルト値はグローバルに設定可能です。

プロパティ
(クリックして昇順にソート)
タイプ
(クリックして昇順にソート)
デフォルト
説明
body-bg-variant
文字列Bootstrap テーマカラーバリアントの1つを本文の背景に適用します。
body-border-variant
文字列Bootstrap テーマカラーバリアントの1つを本文の枠線に適用します。
body-class
Array または Object または String本文に適用するCSSクラス(またはクラス群)
body-tag
文字列'div'本文のデフォルトタグの代わりにレンダリングするHTMLタグを指定します。
body-text-variant
文字列Bootstrap テーマカラーバリアントの1つを本文のテキストに適用します。
overlay
ブール値false設定すると、(カードに画像がある場合)画像の上にカード本文を重ねます。
sub-title
文字列副題に配置するテキストコンテンツ
sub-title-tag
文字列'h6'副題のデフォルトタグの代わりにレンダリングするHTMLタグを指定します。
sub-title-text-variant
文字列'muted'Bootstrap テーマカラーバリアントの1つを副題のテキストに適用します。
title
文字列タイトルに配置するテキストコンテンツ
title-tag
文字列'h4'タイトルのデフォルトタグの代わりにレンダリングするHTMLタグを指定します。

スロット

名前
説明
default カード本文に配置するコンテンツ

<b-card-title>

関数コンポーネント
ソースコードを見る

プロパティ

すべてのプロパティのデフォルト値はグローバルに設定可能です。

プロパティ
タイプ
デフォルト
説明
title
文字列タイトルに配置するテキストコンテンツ
title-tag
文字列'h4'タイトルのデフォルトタグの代わりにレンダリングするHTMLタグを指定します。

スロット

名前
説明
default カードタイトルに配置するコンテンツ

<b-card-sub-title>

関数コンポーネント
ソースコードを見る

プロパティ

すべてのプロパティのデフォルト値はグローバルに設定可能です。

プロパティ
タイプ
デフォルト
説明
sub-title
文字列副題に配置するテキストコンテンツ
sub-title-tag
文字列'h6'副題のデフォルトタグの代わりにレンダリングするHTMLタグを指定します。
sub-title-text-variant
文字列'muted'Bootstrap テーマカラーバリアントの1つを副題のテキストに適用します。

スロット

名前
説明
default カード副題に配置するコンテンツ

<b-card-img>

関数コンポーネント
ソースコードを見る

プロパティ

すべてのプロパティのデフォルト値はグローバルに設定可能です。

プロパティ
(クリックして昇順にソート)
タイプ
(クリックして昇順にソート)
デフォルト
説明
alt
文字列`alt`属性に設定する値
bottom
ブール値false画像をカードの下部に配置するかどうかを設定します。
end
ブール値false画像をカードの右端に配置する場合に設定します。
高さ
数値 または 文字列画像の'height'属性に設定する値
左
ブール値false画像をカードの左端に配置する場合に設定します。'left' プロパティの同義語です。
右
ブール値false画像をカードの右端に配置する場合に設定します。'right' プロパティの同義語です。
src
文字列`src` 属性に設定するURL
開始
ブール値false画像をカードの先頭（左）に配置する場合に設定します。
上
ブール値false画像をカードの上部に配置する場合に設定します。
幅
数値 または 文字列画像の'width'属性に設定する値

<b-card-img-lazy>

関数コンポーネント
ソースコードを見る

プロパティ

すべてのプロパティのデフォルト値はグローバルに設定可能です。

プロパティ
(クリックして昇順にソート)
タイプ
(クリックして昇順にソート)
デフォルト
説明
blank-height
数値 または 文字列プレースホルダー画像の'height'属性の値
blank-src
文字列nullプレースホルダー画像のURL。設定されていない場合、SVGプレースホルダーが使用されます。
blank-width
数値 または 文字列プレースホルダー画像の'width'属性の値
bottom
ブール値false画像をカードの下部に配置するかどうかを設定します。
end
ブール値false画像をカードの右端に配置する場合に設定します。
左
ブール値false画像をカードの左端に配置する場合に設定します。'left' プロパティの同義語です。
offset
数値 または 文字列360遅延読み込み画像が読み込まれる前にビューポート端から離れるピクセル数
右
ブール値false画像をカードの右端に配置する場合に設定します。'right' プロパティの同義語です。
show
ブール値falsetrueに設定すると、'src'プロパティで指定された画像を強制的に表示します。
開始
ブール値false画像をカードの先頭（左）に配置する場合に設定します。
上
ブール値false画像をカードの上部に配置する場合に設定します。

<b-card-text>

関数コンポーネント
ソースコードを見る

プロパティ

すべてのプロパティのデフォルト値はグローバルに設定可能です。

プロパティ
タイプ
デフォルト
説明
text-tag
文字列'p'テキストコンテンツのデフォルトタグの代わりにレンダリングするHTMLタグを指定します。

スロット

名前
説明
default カードテキストに配置するコンテンツ

<b-card-group>

関数コンポーネント
ソースコードを見る

プロパティ

すべてのプロパティのデフォルト値はグローバルに設定可能です。

プロパティ
タイプ
デフォルト
説明
columns
ブール値false設定すると、カードグループをレンガ積みのような列状スタイルでレンダリングします。
deck
ブール値false設定すると、カード間に余白のあるカードグループをレンダリングします。
tag
文字列'div'デフォルトタグの代わりにレンダリングするHTMLタグを指定します。

スロット

名前
説明
default カードグループに配置するコンテンツ（カード）

個々のコンポーネントのインポート

次の名前付きエクスポートを使用して、個々のコンポーネントをプロジェクトにインポートできます。

コンポーネント
名前付きエクスポート
インポートパス
<b-card>BCardbootstrap-vue
<b-card-header>BCardHeaderbootstrap-vue
<b-card-footer>BCardFooterbootstrap-vue
<b-card-body>BCardBodybootstrap-vue
<b-card-title>BCardTitlebootstrap-vue
<b-card-sub-title>BCardSubTitlebootstrap-vue
<b-card-img>BCardImgbootstrap-vue
<b-card-img-lazy>BCardImgLazybootstrap-vue
<b-card-text>BCardTextbootstrap-vue
<b-card-group>BCardGroupbootstrap-vue

例

import { BCard } from 'bootstrap-vue'
Vue.component('b-card', BCard)

Vue.jsプラグインとしてのインポート

このプラグインには、上記にリストされているすべての個々のコンポーネントが含まれています。プラグインには、コンポーネントのエイリアスも含まれています。

名前付きエクスポート
インポートパス
CardPluginbootstrap-vue

例

import { CardPlugin } from 'bootstrap-vue'
Vue.use(CardPlugin)