跳到主要内容

Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

Basic Example

结果
Loading...
实时编辑器

Content types

Body

Use <Card.Body> to pad content inside a <Card>.

结果
Loading...
实时编辑器

Alternatively, you can use this shorthand version for Cards with body only, and no other children

结果
Loading...
实时编辑器

Using <Card.Title>, <Card.Subtitle>, and <Card.Text> inside the <Card.Body> will line them up nicely. <Card.Link>s are used to line up links next to each other.

<Card.Text> outputs <p> tags around the content, so you can use multiple <Card.Text>s to create separate paragraphs.

结果
Loading...
实时编辑器

List Groups

Create lists of content in a card with a flush list group.

结果
Loading...
实时编辑器
结果
Loading...
实时编辑器

Kitchen Sink

结果
Loading...
实时编辑器

You may add a header by adding a <Card.Header> component.

结果
Loading...
实时编辑器

A <CardHeader> can be styled by passing a heading element through the <as> prop

结果
Loading...
实时编辑器
结果
Loading...
实时编辑器
结果
Loading...
实时编辑器

Images

Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.

Image caps

Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.

结果
Loading...
实时编辑器

Image Overlays

Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.

结果
Loading...
实时编辑器

Add some navigation to a card’s header (or block) with React Bootstrap’s Nav components.

结果
Loading...
实时编辑器
结果
Loading...
实时编辑器

Card Styles

Background Color

You can change a card's appearance by changing their <bg>, and <text> props.

结果
Loading...
实时编辑器

Border Color

结果
Loading...
实时编辑器

Card layout

Card Groups

结果
Loading...
实时编辑器

Grid cards

Use Row's grid column props to control how many cards to show per row.

结果
Loading...
实时编辑器

API

Card

CardBody

CardFooter

CardHeader

CardImg

CardImgOverlay

CardSubtitle

CardText

CardTitle

CardGroup