カード

About

card は柔軟で拡張ができるコンテナです。

headers や footers のオプション、多様なコンテンツ、背景色、表示オプションが含まれています。

Bootstrap3 の panels、wells、thumbnails は card に置きかわります。

これらのコンポーネントの機能は card のコンポーネントとして利用できます。

Example

カードは少ないマークアップとスタイルで構築されていますが, 多くのカスタマイズが可能です。

Flexbox で構築されているため、簡単に配置ができ、他のコンポーネントと組み合わせ可能です。

デフォルトでは margin の設定がないので, 必要に応じて spacing utilities を使用します。

以下は,幅が固定されたカードの例です。カードには固定幅がないので, 親要素の幅に広がります。

これは sizing options でカスタマイズ可能です。

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

vue

<template>
 <Card>
  <CardImgTop
   src="/unsplash/image/coffee/tyler-nix-WZLBfkRg-KM-unsplash.jpg"
   alt="..."
  />
  <CardBody>
   <CardTitle>Card title</CardTitle>
   <CardText>
    Some quick example text to build on the card title and make up the bulk
    of the card's content.
   </CardText>
   <Anchor
    to="/"
    button
    color="primary"
   >
    Go somewhere
   </Anchor>
  </CardBody>
 </Card>
</template>

Content types

画像やテキスト、リスト、リンクなどカードは多様なコンテントをサポートしています。下記は例になります。

Body

カードを構築するコンポーネントは CardBody です。padding が必要な section の時はいつでも利用できます。

This is some text within a card body.

vue

<template>
 <Card>
  <CardBody>This is some text within a card body.</CardBody>
 </Card>
</template>

Titles, text, and links

カードタイトルは CardTitle コンポーネントを利用します。

CardLink コンポーネントを利用するとリンクが追加されます。

サブタイトルは、CardSubTitle を適用します。

CardTitle と CardSubTitle のアイテムを CardBody の中に表記すると、良い感じに配置されます。

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

vue

<template>
 <Card style="width: 18rem">
  <CardBody>
   <CardTitle>Card title</CardTitle>
   <CardSubTitle
    margin="b-2"
    text-color="body-secondary"
   >
    Card subtitle
   </CardSubTitle>
   <CardText>
    Some quick example text to build on the card title and make up the bulk
    of the card's content.
   </CardText>
   <CardLink>Card link</CardLink>
   <CardLink>Another link</CardLink>
  </CardBody>
 </Card>
</template>

Images

CardImgTop コンポーネントは画像を上に持ってきます。

CardText コンポーネントはテキストをカードに追加できます。(標準の HTML タグでスタイルを設定可能)

Some quick example text to build on the card title and make up the bulk of the card's content.

vue

<template>
 <Card>
  <CardImgTop
   src="/unsplash/image/coffee/nathan-dumlao-6VhPY27jdps-unsplash.jpg"
   alt="..."
  />
  <CardBody>
   <CardText>
    Some quick example text to build on the card title and make up the bulk
    of the card's content.
   </CardText>
  </CardBody>
 </Card>
</template>

List groups

ListGroup コンポーネントに flush 属性を追加してカードの中にリストを作成できます。

An item

A second item

A third item

vue

<template>
 <Card style="width: 18rem">
  <ListGroup flush>
   <ListGroupItem>An item</ListGroupItem>
   <ListGroupItem>A second item</ListGroupItem>
   <ListGroupItem>A third item</ListGroupItem>
  </ListGroup>
 </Card>
</template>

Featured

An item

A second item

A third item

vue

<template>
 <Card style="width: 18rem">
  <CardHeader>Featured</CardHeader>
  <ListGroup flush>
   <ListGroupItem>An item</ListGroupItem>
   <ListGroupItem>A second item</ListGroupItem>
   <ListGroupItem>A third item</ListGroupItem>
  </ListGroup>
 </Card>
</template>

An item

A second item

A third item

Featured

vue

<template>
 <Card style="width: 18rem">
  <ListGroup flush>
   <ListGroupItem>An item</ListGroupItem>
   <ListGroupItem>A second item</ListGroupItem>
   <ListGroupItem>A third item</ListGroupItem>
  </ListGroup>
  <CardFooter>Featured</CardFooter>
 </Card>
</template>

Kitchen sink

複数のコンテンツをカードの中に入れても横幅は固定になります。

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

An item

A second item

A third item

Card link Another link

vue

<template>
 <Card>
  <CardImgTop
   src="/unsplash/image/coffee/nathan-dumlao-6VhPY27jdps-unsplash.jpg"
   alt="..."
  />
  <CardBody>
   <CardTitle>Card title</CardTitle>
   <CardText>
    Some quick example text to build on the card title and make up the bulk
    of the card's content.
   </CardText>
   <Anchor
    to="/"
    button
    color="primary"
   >
    Go somewhere
   </Anchor>
  </CardBody>
  <ListGroup flush>
   <ListGroupItem>An item</ListGroupItem>
   <ListGroupItem>A second item</ListGroupItem>
   <ListGroupItem>A third item</ListGroupItem>
  </ListGroup>
  <CardBody>
   <CardLink>Card link</CardLink>
   <CardLink>Another link</CardLink>
  </CardBody>
 </Card>
</template>

Header and footer

カードの中にオプションとしてヘッダーやフッターを加えることできます。

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

vue

<template>
 <Card>
  <CardHeader>Featured</CardHeader>
  <CardBody>
   <CardTitle>Special title treatment</CardTitle>
   <CardText>
    With supporting text below as a natural lead-in to additional content.
   </CardText>
   <Anchor
    to="/"
    button
    color="primary"
   >
    Go somewhere
   </Anchor>
  </CardBody>
 </Card>
</template>

CardHeader コンポーネントを利用することでカードにヘッダーを付け足すことできます。

Featured

Special title treatment

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

vue

<template>
 <Card>
  <CardHeader>Featured</CardHeader>
  <CardBody>
   <CardTitle>Special title treatment</CardTitle>
   <CardText>
    Some quick example text to build on the card title and make up the bulk
    of the card's content.
   </CardText>
   <Anchor
    to="/"
    button
    color="primary"
   >
    Go somewhere
   </Anchor>
  </CardBody>
 </Card>
</template>

Quote

A well-known quote, contained in a blockquote element.
Someone famous in Source Title

vue

<template>
 <Card>
  <CardHeader>Quote</CardHeader>
  <CardBody>
   <BBlockquote margin="b-0">
    <b-p>A well-known quote, contained in a blockquote element.</b-p>
    <BBlockquoteFooter tag="footer">
     Someone famous in
     <cite title="Source Title">Source Title</cite>
    </BBlockquoteFooter>
   </BBlockquote>
  </CardBody>
 </Card>
</template>

Featured

Special title treatment

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

2 days ago

vue

<template>
 <Card text-alignment="center">
  <CardHeader>Featured</CardHeader>
  <CardBody>
   <CardTitle>Special title treatment</CardTitle>
   <CardText>
    Some quick example text to build on the card title and make up the bulk
    of the card's content.
   </CardText>
   <Anchor
    to="/"
    button
    color="primary"
   >
    Go somewhere
   </Anchor>
  </CardBody>
  <CardFooter text-color="body-secondary">
   2 days ago
  </CardFooter>
 </Card>
</template>

Sizing

カードの幅 width は特に設定がされていない限り 100%に設定されています。

カスタム CSS、グリッド属性、グリッド Sass ミックスイン、またはユーティリティを使用することで必要に応じて変更できます。

Using grid markup

グリッドレイアウトでは columns と rows の中にカードを使ってください。

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

vue

<template>
 <Row>
  <Col col="sm-6">
   <Card>
    <CardBody>
     <CardTitle>Special title treatment</CardTitle>
     <CardText>
      With supporting text below as a natural lead-in to additional
      content.
     </CardText>
     <Anchor
      to="/"
      button
      color="primary"
     >
      Go somewhere
     </Anchor>
    </CardBody>
   </Card>
  </Col>
  <Col col="sm-6">
   <Card>
    <CardBody>
     <CardTitle>Special title treatment</CardTitle>
     <CardText>
      With supporting text below as a natural lead-in to additional
      content.
     </CardText>
     <Anchor
      to="/"
      button
      color="primary"
     >
      Go somewhere
     </Anchor>
    </CardBody>
   </Card>
  </Col>
 </Row>
</template>

Using utilities

カードの幅は relative-width 属性を使います。

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

vue

<template>
 <Card relative-width="75">
  <CardBody>
   <CardTitle>Card title</CardTitle>
   <CardText>
    Some quick example text to build on the card title and make up the bulk
    of the card's content.
   </CardText>
   <Anchor
    to="/"
    color="primary"
   >
    Go somewhere
   </Anchor>
  </CardBody>
 </Card>

 <Card relative-width="50">
  <CardBody>
   <CardTitle>Card title</CardTitle>
   <CardText>
    Some quick example text to build on the card title and make up the bulk
    of the card's content.
   </CardText>
   <Anchor
    to="/"
    color="primary"
   >
    Go somewhere
   </Anchor>
  </CardBody>
 </Card>
</template>

Using custom CSS

スタイルシートでまたはインラインスタイルとして幅を設定するときはカスタム CSS を使用してください。

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

vue

<template>
 <Row>
  <Col col="6">
   <Card style="width: 18rem">
    <CardBody>
     <CardTitle>Special title treatment</CardTitle>
     <CardText>
      With supporting text below as a natural lead-in to additional
      content.
     </CardText>
     <Anchor
      to="/"
      button
      color="primary"
     >
      Go somewhere
     </Anchor>
    </CardBody>
   </Card>
  </Col>
 </Row>
</template>

Text alignment

text-alignmentを用いることでカード全体または一部分のテキストの配置を素早く変更することができます。

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

vue

<template>
 <Card style="width: 18rem">
  <CardBody>
   <CardTitle>Special title treatment</CardTitle>
   <CardText>
    With supporting text below as a natural lead-in to additional content.
   </CardText>
   <Anchor
    to="/"
    button
    color="primary"
   >
    Go somewhere
   </Anchor>
  </CardBody>
 </Card>
 <Card
  text-alignment="center"
  style="width: 18rem"
 >
  <CardBody>
   <CardTitle>Special title treatment</CardTitle>
   <CardText>
    With supporting text below as a natural lead-in to additional content.
   </CardText>
   <Anchor
    to="/"
    button
    color="primary"
   >
    Go somewhere
   </Anchor>
  </CardBody>
 </Card>
 <Card
  text-alignment="end"
  style="width: 18rem"
 >
  <CardBody>
   <CardTitle>Special title treatment</CardTitle>
   <CardText>
    With supporting text below as a natural lead-in to additional content.
   </CardText>
   <Anchor
    to="/"
    button
    color="primary"
   >
    Go somewhere
   </Anchor>
  </CardBody>
 </Card>
</template>

Navigation

Bootstrap の Nav コンポーネントを使えばカードのヘッダーにナビゲーションをつけることができます。

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

vue

<template>
 <Card text-alignment="center">
  <CardHeader>
   <Nav card>
    <NavItem>
     <NavLink
      to="/lang-[lang]/components/card"
      dynamic-route
     >
      Active
     </NavLink>
    </NavItem>
    <NavItem>
     <NavLink
      to="/lang-[lang]"
      dynamic-route
     >
      Link
     </NavLink>
    </NavItem>
    <NavItem>
     <NavLink
      disabled
      to="/lang-[lang]"
      dynamic-route
     >
      Disabled
     </NavLink>
    </NavItem>
   </Nav>
  </CardHeader>
  <CardBody>
   <CardTitle>Special title treatment</CardTitle>
   <CardText>
    With supporting text below as a natural lead-in to additional content.
   </CardText>
   <Anchor
    to="/"
    button
    color="primary"
   >
    Go somewhere
   </Anchor>
  </CardBody>
 </Card>
</template>

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

vue

<template>
 <Card text-alignment="center">
  <CardHeader>
   <Nav card>
    <NavItem>
     <NavLink
      to="/lang-[lang]/components/card"
      dynamic-route
     >
      Active
     </NavLink>
    </NavItem>
    <NavItem>
     <NavLink
      to="/lang-[lang]/"
      dynamic-route
     >
      Link
     </NavLink>
    </NavItem>
    <NavItem>
     <NavLink
      disabled
      to="/lang-en/"
     >
      Disabled
     </NavLink>
    </NavItem>
   </Nav>
  </CardHeader>
  <CardBody>
   <CardTitle>Special title treatment</CardTitle>
   <CardText>
    With supporting text below as a natural lead-in to additional content.
   </CardText>
   <Anchor
    to="/"
    button
    color="primary"
   >
    Go somewhere
   </Anchor>
  </CardBody>
 </Card>
</template>

Images

カードには、画像とともに作用するいくつかのオプションが含まれています。カードの両端に「画像キャップ」を追加するか、画像にカードコンテンツをオーバーレイするか、単に画像をカードに埋め込むかを選択します。

Image caps

ヘッダーやフッターに似ていますがカードの上部または下部にイメージキャップをつけることができます。

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Last updated 3 mins ago

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Last updated 3 mins ago

vue

<template>
 <Card margin="b-3">
  <CardImgTop
   src="/unsplash/image/coffee/tyler-nix-WZLBfkRg-KM-unsplash.jpg"
   alt="..."
  />
  <CardBody>
   <CardTitle>Card title</CardTitle>
   <CardText>
    Some quick example text to build on the card title and make up the bulk
    of the card's content.
   </CardText>
   <CardText
    text-color="body-secondary"
    small
   >
    Last updated 3 mins ago
   </CardText>
  </CardBody>
 </Card>
 <Card>
  <CardBody>
   <CardTitle>Card title</CardTitle>
   <CardText>
    Some quick example text to build on the card title and make up the bulk
    of the card's content.
   </CardText>
   <CardText
    text-color="body-secondary"
    small
   >
    Last updated 3 mins ago
   </CardText>
  </CardBody>
  <CardImgBottom
   src="/unsplash/image/coffee/nathan-dumlao-6VhPY27jdps-unsplash.jpg"
   alt="..."
  />
 </Card>
</template>

Image overlays

画像をカードの背景に変換し、カードのテキストをオーバーレイします。

画像によっては、追加のスタイルやユーティリティが必要な場合と不要な場合があります。

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Last updated 3 mins ago

vue

<template>
 <Card
  text-color="white"
  background-color="dark"
 >
  <CardImg
   src="/unsplash/image/cafe/janosch-lino-k6w8miMpfUI-unsplash.jpg"
   alt="..."
  />
  <CardImgOverlay>
   <CardTitle>Card title</CardTitle>
   <CardText>
    Some quick example text to build on the card title and make up the bulk
    of the card's content.
   </CardText>
   <CardText
    text-color="body-secondary"
    small
   >
    Last updated 3 mins ago
   </CardText>
  </CardImgOverlay>
 </Card>
</template>

tip

コンテンツは画像の高さを超えないようにしてください。

もしコンテンツが画像より大きい場合、画像をはみだしてコンテンツが表示されます。

Horizontal

グリッドとユーティリティ・クラスを組み合わせることで、モバイルフレンドリーでレスポンシブな方法でカードを水平にすることができます。下の例では、gutter="0"属性でグリッドのガターを取り除き、col="md-*"属性を使ってmdブレイクポイントでカードを水平にしています。カードの内容によっては、さらに調整が必要かもしれません。

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Last updated 3 mins ago

vue

<template>
 <Card margin="b-3">
  <Row gutter="0">
   <Col col="md-4">
    <b-img
     fluid
     rounded="start"
     src="/unsplash/image/coffee/tyler-nix-WZLBfkRg-KM-unsplash.jpg"
     alt="..."
    />
   </Col>
   <Col col="md-8">
    <CardBody>
     <CardTitle>Card title</CardTitle>
     <CardText>
      Some quick example text to build on the card title and make up the
      bulk of the card's content.
     </CardText>
     <CardText
      text-color="body-secondary"
      small
     >
      Last updated 3 mins ago
     </CardText>
    </CardBody>
   </Col>
  </Row>
 </Card>
</template>

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Dark Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

vue

<template>
 <Card
  color="primary"
  margin="b-3"
  style="max-width: 18rem"
 >
  <CardHeader>Header</CardHeader>
  <CardBody>
   <CardTitle>Primary Card title</CardTitle>
   <CardText>
    Some quick example text to build on the card title and make up the bulk
    of the card's content.
   </CardText>
  </CardBody>
 </Card>
 <Card
  color="secondary"
  margin="b-3"
  style="max-width: 18rem"
 >
  <CardHeader>Header</CardHeader>
  <CardBody>
   <CardTitle>Secondary Card title</CardTitle>
   <CardText>
    Some quick example text to build on the card title and make up the bulk
    of the card's content.
   </CardText>
  </CardBody>
 </Card>
 <Card
  color="success"
  margin="b-3"
  style="max-width: 18rem"
 >
  <CardHeader>Header</CardHeader>
  <CardBody>
   <CardTitle>Success Card title</CardTitle>
   <CardText>
    Some quick example text to build on the card title and make up the bulk
    of the card's content.
   </CardText>
  </CardBody>
 </Card>
 <Card
  color="danger"
  margin="b-3"
  style="max-width: 18rem"
 >
  <CardHeader>Header</CardHeader>
  <CardBody>
   <CardTitle>Danger Card title</CardTitle>
   <CardText>
    Some quick example text to build on the card title and make up the bulk
    of the card's content.
   </CardText>
  </CardBody>
 </Card>
 <Card
  color="warning"
  margin="b-3"
  style="max-width: 18rem"
 >
  <CardHeader>Header</CardHeader>
  <CardBody>
   <CardTitle>Warning Card title</CardTitle>
   <CardText>
    Some quick example text to build on the card title and make up the bulk
    of the card's content.
   </CardText>
  </CardBody>
 </Card>
 <Card
  color="info"
  margin="b-3"
  style="max-width: 18rem"
 >
  <CardHeader>Header</CardHeader>
  <CardBody>
   <CardTitle>Info Card title</CardTitle>
   <CardText>
    Some quick example text to build on the card title and make up the bulk
    of the card's content.
   </CardText>
  </CardBody>
 </Card>
 <Card
  color="light"
  margin="b-3"
  style="max-width: 18rem"
 >
  <CardHeader>Header</CardHeader>
  <CardBody>
   <CardTitle>Light Card title</CardTitle>
   <CardText>
    Some quick example text to build on the card title and make up the bulk
    of the card's content.
   </CardText>
  </CardBody>
 </Card>
 <Card
  color="dark"
  margin="b-3"
  style="max-width: 18rem"
 >
  <CardHeader>Header</CardHeader>
  <CardBody>
   <CardTitle>Dark Card title</CardTitle>
   <CardText>
    Some quick example text to build on the card title and make up the bulk
    of the card's content.
   </CardText>
  </CardBody>
 </Card>
</template>

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Border subtractive Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

vue

<template>
 <b-div padding="3">
  <Card
   border-color="primary"
   margin="b-3"
   style="max-width: 18rem"
  >
   <CardHeader>Header</CardHeader>
   <CardBody text-color="primary">
    <CardTitle>Primary Card title</CardTitle>
    <CardText>
     Some quick example text to build on the card title and make up the
     bulk of the card's content.
    </CardText>
   </CardBody>
  </Card>
  <Card
   border-color="secondary"
   margin="b-3"
   style="max-width: 18rem"
  >
   <CardHeader>Header</CardHeader>
   <CardBody text-color="secondary">
    <CardTitle>Secondary Card title</CardTitle>
    <CardText>
     Some quick example text to build on the card title and make up the
     bulk of the card's content.
    </CardText>
   </CardBody>
  </Card>
  <Card
   border-color="success"
   margin="b-3"
   style="max-width: 18rem"
  >
   <CardHeader>Header</CardHeader>
   <CardBody text-color="success">
    <CardTitle>Success Card title</CardTitle>
    <CardText>
     Some quick example text to build on the card title and make up the
     bulk of the card's content.
    </CardText>
   </CardBody>
  </Card>
  <Card
   border-color="danger"
   margin="b-3"
   style="max-width: 18rem"
  >
   <CardHeader>Header</CardHeader>
   <CardBody text-color="danger">
    <CardTitle>Danger Card title</CardTitle>
    <CardText>
     Some quick example text to build on the card title and make up the
     bulk of the card's content.
    </CardText>
   </CardBody>
  </Card>
  <Card
   border-color="warning"
   margin="b-3"
   style="max-width: 18rem"
  >
   <CardHeader>Header</CardHeader>
   <CardBody text-color="warning">
    <CardTitle>Warning Card title</CardTitle>
    <CardText>
     Some quick example text to build on the card title and make up the
     bulk of the card's content.
    </CardText>
   </CardBody>
  </Card>
  <Card
   border-color="info"
   margin="b-3"
   style="max-width: 18rem"
  >
   <CardHeader>Header</CardHeader>
   <CardBody text-color="info">
    <CardTitle>Info Card title</CardTitle>
    <CardText>
     Some quick example text to build on the card title and make up the
     bulk of the card's content.
    </CardText>
   </CardBody>
  </Card>
  <Card
   border-color="light"
   margin="b-3"
   style="max-width: 18rem"
  >
   <CardHeader>Header</CardHeader>
   <CardBody>
    <CardTitle>Light Card title</CardTitle>
    <CardText>
     Some quick example text to build on the card title and make up the
     bulk of the card's content.
    </CardText>
   </CardBody>
  </Card>
  <Card
   border-color="dark"
   margin="b-3"
   style="max-width: 18rem"
  >
   <CardHeader>Header</CardHeader>
   <CardBody text-color="dark">
    <CardTitle>Dark Card title</CardTitle>
    <CardText>
     Some quick example text to build on the card title and make up the
     bulk of the card's content.
    </CardText>
   </CardBody>
  </Card>
  <Card
   border-subtractive
   margin="b-3"
   style="max-width: 18rem"
  >
   <CardHeader border-subtractive>
    Header
   </CardHeader>
   <CardBody>
    <CardTitle>Border subtractive Card title</CardTitle>
    <CardText>
     Some quick example text to build on the card title and make up the
     bulk of the card's content.
    </CardText>
   </CardBody>
  </Card>
 </b-div>
</template>

Mixins utilities

また、必要に応じて、カードのヘッダーとフッターのボーダーを変更したり、background-color="transparent"属性で背景色を削除することもできます。

Header

Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Footer

vue

<template>
 <Card
  border-color="success"
  margin="b-3"
  style="max-width: 18rem"
 >
  <CardHeader
   background-color="transparent"
   border-color="success"
  >
   Header
  </CardHeader>
  <CardBody text-color="success">
   <CardTitle>Success card title</CardTitle>
   <CardText>
    Some quick example text to build on the card title and make up the bulk
    of the card's content.
   </CardText>
  </CardBody>
  <CardFooter
   background-color="transparent"
   border-color="success"
  >
   Footer
  </CardFooter>
 </Card>
</template>

Card layout

カード内のコンテンツのスタイリングに加えて、Bootstrapには、一連のカードをレイアウトするためのいくつかのオプションがあります。いまのところ、これらのレイアウトオプションはまだレスポンシブではありません。

Card groups

カードグループを使って、カードを幅と高さの等しいカラムを持つ１つのくっついた要素としてレンダリングします。カードグループは積み重ねられた状態から始まり、display: flex;をつかって、smブレークポイントから始まる均一の寸法でくっついた状態になります。

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

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.

Last updated 3 mins ago

vue

<template>
 <CardGroup>
  <Card>
   <CardImgTop
    src="/unsplash/image/cafe/claudio-poggio-xCK8kr0R0JE-unsplash.jpg"
    alt="..."
   />
   <CardBody>
    <CardTitle>Card title</CardTitle>
    <CardText>
     This is a wider card with supporting text below as a natural lead-in
     to additional content. This content is a little bit longer.
    </CardText>
    <CardText text-color="body-secondary">
     Last updated 3 mins ago
    </CardText>
   </CardBody>
  </Card>
  <Card>
   <CardImgTop
    src="/unsplash/image/cafe/janosch-lino-k6w8miMpfUI-unsplash.jpg"
    alt="..."
   />
   <CardBody>
    <CardTitle>Card title</CardTitle>
    <CardText>
     This card has supporting text below as a natural lead-in to additional
     content.
    </CardText>
    <CardText text-color="body-secondary">
     Last updated 3 mins ago
    </CardText>
   </CardBody>
  </Card>
  <Card>
   <CardImgTop
    src="/unsplash/image/cafe/roman-bozhko-OXXsAafHDeo-unsplash.jpg"
    alt="..."
   />
   <CardBody>
    <CardTitle>Card title</CardTitle>
    <CardText>
     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.
    </CardText>
    <CardText text-color="body-secondary">
     Last updated 3 mins ago
    </CardText>
   </CardBody>
  </Card>
 </CardGroup>
</template>

フッター付きのカードグループを使用すると、コンテンツが自動的に並びます。

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Last updated 3 mins ago

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Last updated 3 mins ago

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Last updated 3 mins ago

vue

<template>
 <CardGroup>
  <Card>
   <CardImgTop
    src="/unsplash/image/cafe/claudio-poggio-xCK8kr0R0JE-unsplash.jpg"
    alt="..."
   />
   <CardBody>
    <CardTitle>Card title</CardTitle>
    <CardText>
     Some quick example text to build on the card title and make up the
     bulk of the card's content.
    </CardText>
   </CardBody>
   <CardFooter>
    <b-p text-color="body-secondary">
     Last updated 3 mins ago
    </b-p>
   </CardFooter>
  </Card>
  <Card>
   <CardImgTop
    src="/unsplash/image/cafe/janosch-lino-k6w8miMpfUI-unsplash.jpg"
    alt="..."
   />
   <CardBody>
    <CardTitle>Card title</CardTitle>
    <CardText>
     Some quick example text to build on the card title and make up the
     bulk of the card's content.
    </CardText>
   </CardBody>
   <CardFooter>
    <b-p text-color="body-secondary">
     Last updated 3 mins ago
    </b-p>
   </CardFooter>
  </Card>
  <Card>
   <CardImgTop
    src="/unsplash/image/cafe/roman-bozhko-OXXsAafHDeo-unsplash.jpg"
    alt="..."
   />
   <CardBody>
    <CardTitle>Card title</CardTitle>
    <CardText>
     Some quick example text to build on the card title and make up the
     bulk of the card's content.
    </CardText>
   </CardBody>
   <CardFooter>
    <b-p text-color="body-secondary">
     Last updated 3 mins ago
    </b-p>
   </CardFooter>
  </Card>
 </CardGroup>
</template>

Grid cards

Bootstrapのグリッドシステムと Rowコンポーネントのcolumns を使用して、1行に表示するグリッドカラム（カードを含む）の数を制御します。ここでは、columns="1 md-2"は、1つの列にカードをレイアウトし、columns="md-2"は、中間のブレイクポイントから上に、複数の行にわたって4つのカードを同じ幅に分割します。

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

vue

<template>
 <Row
  columns="1 md-2"
  :gutter="4"
 >
  <Col>
   <Card>
    <CardImgTop
     src="/unsplash/image/cafe/claudio-poggio-xCK8kr0R0JE-unsplash.jpg"
     alt="..."
    />
    <CardBody>
     <CardTitle>Card title</CardTitle>
     <CardText>
      This is a longer card with supporting text below as a natural
      lead-in to additional content. This content is a little bit longer.
     </CardText>
    </CardBody>
   </Card>
  </Col>
  <Col>
   <Card>
    <CardImgTop
     src="/unsplash/image/cafe/janosch-lino-k6w8miMpfUI-unsplash.jpg"
     alt="..."
    />
    <CardBody>
     <CardTitle>Card title</CardTitle>
     <CardText>
      This is a longer card with supporting text below as a natural
      lead-in to additional content. This content is a little bit longer.
     </CardText>
    </CardBody>
   </Card>
  </Col>
  <Col>
   <Card>
    <CardImgTop
     src="/unsplash/image/cafe/roman-bozhko-OXXsAafHDeo-unsplash.jpg"
     alt="..."
    />
    <CardBody>
     <CardTitle>Card title</CardTitle>
     <CardText>
      This is a longer card with supporting text below as a natural
      lead-in to additional content.
     </CardText>
    </CardBody>
   </Card>
  </Col>
  <Col>
   <Card>
    <CardImgTop
     src="/unsplash/image/cafe/daan-evers-tKN1WXrzQ3s-unsplash.jpg"
     alt="..."
    />
    <CardBody>
     <CardTitle>Card title</CardTitle>
     <CardText>
      This is a longer card with supporting text below as a natural
      lead-in to additional content. This content is a little bit longer.
     </CardText>
    </CardBody>
   </Card>
  </Col>
 </Row>
</template>

columns="3"に変更すると、4枚目のカードが折り返されます。

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

vue

<template>
 <Row
  columns="1 md-3"
  :gutter="4"
 >
  <Col>
   <Card>
    <CardImgTop
     src="/unsplash/image/cafe/claudio-poggio-xCK8kr0R0JE-unsplash.jpg"
     alt="..."
    />
    <CardBody>
     <CardTitle>Card title</CardTitle>
     <CardText>
      This is a longer card with supporting text below as a natural
      lead-in to additional content. This content is a little bit longer.
     </CardText>
    </CardBody>
   </Card>
  </Col>
  <Col>
   <Card>
    <CardImgTop
     src="/unsplash/image/cafe/janosch-lino-k6w8miMpfUI-unsplash.jpg"
     alt="..."
    />
    <CardBody>
     <CardTitle>Card title</CardTitle>
     <CardText>
      This is a longer card with supporting text below as a natural
      lead-in to additional content. This content is a little bit longer.
     </CardText>
    </CardBody>
   </Card>
  </Col>
  <Col>
   <Card>
    <CardImgTop
     src="/unsplash/image/cafe/roman-bozhko-OXXsAafHDeo-unsplash.jpg"
     alt="..."
    />
    <CardBody>
     <CardTitle>Card title</CardTitle>
     <CardText>
      This is a longer card with supporting text below as a natural
      lead-in to additional content.
     </CardText>
    </CardBody>
   </Card>
  </Col>
  <Col>
   <Card>
    <CardImgTop
     src="/unsplash/image/cafe/daan-evers-tKN1WXrzQ3s-unsplash.jpg"
     alt="..."
    />
    <CardBody>
     <CardTitle>Card title</CardTitle>
     <CardText>
      This is a longer card with supporting text below as a natural
      lead-in to additional content. This content is a little bit longer.
     </CardText>
    </CardBody>
   </Card>
  </Col>
 </Row>
</template>

同じ高さが必要な場合は、カードにrelative-height="100"属性を追加します。デフォルトで同じ高さが必要な場合は、Sassで$card-height: 100%;を設定します。

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This is a short card.

Last updated 3 mins ago

Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

vue

<template>
 <Row
  columns="1 md-3"
  :gutter="4"
 >
  <Col>
   <Card relative-height="100">
    <CardImgTop
     src="/unsplash/image/cafe/claudio-poggio-xCK8kr0R0JE-unsplash.jpg"
     alt="..."
    />
    <CardBody>
     <CardTitle>Card title</CardTitle>
     <CardText>
      This is a longer card with supporting text below as a natural
      lead-in to additional content. This content is a little bit longer.
     </CardText>
     <CardText text-color="body-secondary">
      Last updated 3 mins ago
     </CardText>
    </CardBody>
   </Card>
  </Col>
  <Col>
   <Card relative-height="100">
    <CardImgTop
     src="/unsplash/image/cafe/janosch-lino-k6w8miMpfUI-unsplash.jpg"
     alt="..."
    />
    <CardBody>
     <CardTitle>Card title</CardTitle>
     <CardText>This is a short card.</CardText>
     <CardText text-color="body-secondary">
      Last updated 3 mins ago
     </CardText>
    </CardBody>
   </Card>
  </Col>
  <Col>
   <Card relative-height="100">
    <CardImgTop
     src="/unsplash/image/cafe/roman-bozhko-OXXsAafHDeo-unsplash.jpg"
     alt="..."
    />
    <CardBody>
     <CardTitle>Card title</CardTitle>
     <CardText>
      This is a longer card with supporting text below as a natural
      lead-in to additional content.
     </CardText>
     <CardText text-color="body-secondary">
      Last updated 3 mins ago
     </CardText>
    </CardBody>
   </Card>
  </Col>
  <Col>
   <Card relative-height="100">
    <CardImgTop
     src="/unsplash/image/cafe/daan-evers-tKN1WXrzQ3s-unsplash.jpg"
     alt="..."
    />
    <CardBody>
     <CardTitle>Card title</CardTitle>
     <CardText>
      This is a longer card with supporting text below as a natural
      lead-in to additional content. This content is a little bit longer.
     </CardText>
     <CardText text-color="body-secondary">
      Last updated 3 mins ago
     </CardText>
    </CardBody>
   </Card>
  </Col>
 </Row>
</template>

Card title

Example text.

Example text

Translate on Hover

Design Tools

Access to advanced design techniques

Browse tools

vue

<template>
 <Card
  class="hover:-un-translate-y-0.5"
 >
  <CardImg
   src="/unsplash/image/480x220/dlxmedia-hu-U-W8FKeC6Mo-unsplash.jpg"
   alt="Image Description"
   ratio="16x9"
  />
  <CardImgOverlay>
   <CardBody>
    <CardTitle text-color="dark">
     Design Tools
    </CardTitle>
    <CardText text-color="dark">
     Access to advanced design techniques
    </CardText>
   </CardBody>
   <CardFooter>
    <CardLink
     stretched
     to="/"
     icon="bi:chevron-right"
     icon-end
    >
     Browse tools 
    </CardLink>
   </CardFooter>
  </CardImgOverlay>
 </Card>
</template>

Link Icon

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Card link

vue

<template>
 <Card style="width: 18rem">
  <CardBody>
   <CardTitle>Card title</CardTitle>
   <CardSubTitle
    margin="b-2"
    text-color="body-secondary"
   >
    Card subtitle
   </CardSubTitle>
   <CardText>
    Some quick example text to build on the card title and make up the bulk
    of the card's content.
   </CardText>
   <CardLink
    icon="bi:chevron-right"
    icon-end
    to="/"
   >
    Card link
   </CardLink>
   <CardLink
    icon="bi:chevron-right"
    icon-end
    to="/"
   >
    Card link
   </CardLink>
  </CardBody>
 </Card>
</template>

Streched Link

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link

vue

<template>
 <Card style="width: 18rem">
  <CardBody>
   <CardTitle>Card title</CardTitle>
   <CardSubTitle
    margin="b-2"
    text-color="body-secondary"
   >
    Card subtitle
   </CardSubTitle>
   <CardText>
    Some quick example text to build on the card title and make up the bulk
    of the card's content.
   </CardText>
   <CardLink
    stretched
    icon="bi:chevron-right"
    icon-end
    to="/"
   >
    Card link
   </CardLink>
  </CardBody>
 </Card>
</template>