Card

Bootstrap's card component provides a flexible and extensible content container with multiple variants and options.

Playground

Experiment with the Card component by adjusting the options below:

Card Interactive Playground

Controls

Card Width (rem)

18rem

Card Structure

Include Header

Include Footer

Include Image

Image Position

Use Image Overlay

Background Color

Additional CSS Classes

Card Content

Include Title & Subtitle

Title Text

Title Heading Level

Subtitle Text

Subtitle Heading Level

Include Body Text

Body Text

Include Links

Header Text

Footer Text

Preview

Featured

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

Last updated 3 mins ago

Code

            
            <Card.Root class="w-18rem">
  <Card.Img position="top" src="https://placehold.co/300x180" alt="Card image cap" />
  <Card.Header>Featured</Card.Header>
  <Card.Body>
    <Card.Title level={5}>Card Title</Card.Title>
    <Card.Subtitle level={6}>Card Subtitle</Card.Subtitle>
    <Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
    <Card.Link href="#!">Card Link</Card.Link>
    <Card.Link href="#!">Another Link</Card.Link>
  </Card.Body>
  <Card.Footer>Last updated 3 mins ago</Card.Footer>
</Card.Root>

Basic Example

Cards are built with as little markup and styles as possible but still manage to deliver a ton of control and customization.

Card Title

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

            
            <Card.Root class="w-18rem">
    <Card.Img position="top" src="https://placehold.co/300x180" alt="Card image cap" />
    <Card.Body>
        <Card.Title>Card Title</Card.Title>
        <Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
        <button class="btn btn-primary">Go somewhere</button>
    </Card.Body>
</Card.Root>

Content Types

Cards support a wide variety of content, including images, text, list groups, links, and more.

Body

The building block of a card is the Card.Body. Use it whenever you need a padded section within a card.

This is some text within a card body.

            
            <Card.Root>
    <Card.Body>
        This is some text within a card body.
    </Card.Body>
</Card.Root>

Titles, Text, and Links

Card titles are added with Card.Title component, text with Card.Text, and links with Card.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 Another link

            
            <Card.Root class="w-18rem">
    <Card.Body>
        <Card.Title>Card title</Card.Title>
        <Card.Subtitle class="mb-2 text-body-secondary">Card subtitle</Card.Subtitle>
        <Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
        <Card.Link href="#!">Card link</Card.Link>
        <Card.Link href="#!">Another link</Card.Link>
    </Card.Body>
</Card.Root>

Images

Card.Img adds an image to your card. You can position the image at the top, bottom, or with no position (which places it as a standard img).

Top image

This card has an image at the top.

Bottom image

This card has an image at the bottom.

            
            <!-- Top image -->
<Card.Root class="w-18rem">
    <Card.Img position="top" src="https://placehold.co/300x180" alt="Card image cap" />
    <Card.Body>
        <Card.Title>Top image</Card.Title>
        <Card.Text>This card has an image at the top.</Card.Text>
    </Card.Body>
</Card.Root>

<!-- Bottom image -->
<Card.Root class="w-18rem">
    <Card.Body>
        <Card.Title>Bottom image</Card.Title>
        <Card.Text>This card has an image at the bottom.</Card.Text>
    </Card.Body>
    <Card.Img position="bottom" src="https://placehold.co/300x180" alt="Card image cap" />
</Card.Root>

List Groups

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

An item
A second item
A third item

            
            <Card.Root class="w-18rem">
    <ul class="list-group list-group-flush">
        <li class="list-group-item">An item</li>
        <li class="list-group-item">A second item</li>
        <li class="list-group-item">A third item</li>
    </ul>
</Card.Root>

Kitchen Sink

Mix and match multiple content types to create the card you need.

Card title

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

An item
A second item
A third item

Card link Another link

            
            <Card.Root class="w-18rem">
    <Card.Img position="top" src="https://placehold.co/300x180" alt="Card image cap" />
    <Card.Body>
        <Card.Title>Card title</Card.Title>
        <Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
    </Card.Body>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">An item</li>
        <li class="list-group-item">A second item</li>
        <li class="list-group-item">A third item</li>
    </ul>
    <Card.Body>
        <Card.Link href="#!">Card link</Card.Link>
        <Card.Link href="#!">Another link</Card.Link>
    </Card.Body>
</Card.Root>

Header and Footer

Add an optional header and footer to your cards using Card.Header and Card.Footer.

Featured

Special title treatment

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

2 days ago

            
            <Card.Root>
    <Card.Header>Featured</Card.Header>
    <Card.Body>
        <Card.Title>Special title treatment</Card.Title>
        <Card.Text>With supporting text below as a natural lead-in to additional content.</Card.Text>
        <button class="btn btn-primary">Go somewhere</button>
    </Card.Body>
    <Card.Footer class="text-body-secondary">2 days ago</Card.Footer>
</Card.Root>

Image Overlays

Turn an image into a card background and overlay your card's text. Use Card.ImgOverlay to contain your text content.

Card title

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

Last updated 3 mins ago

            
            <Card.Root class="text-bg-dark w-18rem">
    <Card.Img src="https://placehold.co/300x180" alt="Card image" />
    <Card.ImgOverlay>
        <Card.Title>Card title</Card.Title>
        <Card.Text>This is a wider card with supporting text below as a natural lead-in to additional content.</Card.Text>
        <Card.Text><small>Last updated 3 mins ago</small></Card.Text>
    </Card.ImgOverlay>
</Card.Root>

Horizontal Cards

Using Bootstrap's grid system, you can create horizontal cards by mixing and matching with additional elements.

Card title

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

Last updated 3 mins ago

            
            <Card.Root class="mb-3" style="max-width: 540px;">
    <div class="row g-0">
        <div class="col-md-4">
            <Card.Img src="https://placehold.co/120x180" class="img-fluid rounded-start" alt="Card image" />
        </div>
        <div class="col-md-8">
            <Card.Body>
                <Card.Title>Card title</Card.Title>
                <Card.Text>This is a wider card with supporting text below as a natural lead-in to additional content.</Card.Text>
                <Card.Text><small class="text-body-secondary">Last updated 3 mins ago</small></Card.Text>
            </Card.Body>
        </div>
    </div>
</Card.Root>

Card Styles

Cards include various options for customizing their backgrounds, borders, and colors.

Background and Color

Use the text and background utilities to change the appearance of a card.

Header

Primary card title

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

Header

Secondary card title

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

Header

Success card title

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

Header

Danger card title

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

            
            <Card.Root class="text-bg-primary mb-3" style="max-width: 18rem;">
    <Card.Header>Header</Card.Header>
    <Card.Body>
        <Card.Title>Primary card title</Card.Title>
        <Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
    </Card.Body>
</Card.Root>

<Card.Root class="text-bg-secondary mb-3" style="max-width: 18rem;">
    <!-- Content similar to above -->
</Card.Root>

<Card.Root class="text-bg-success mb-3" style="max-width: 18rem;">
    <!-- Content similar to above -->
</Card.Root>

<Card.Root class="text-bg-danger mb-3" style="max-width: 18rem;">
    <!-- Content similar to above -->
</Card.Root>

Border

Use border utilities to change just the border color of a card.

Header

Primary card title

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

Header

Success card title

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

            
            <Card.Root class="border-primary mb-3" style="max-width: 18rem;">
    <Card.Header>Header</Card.Header>
    <Card.Body class="text-primary">
        <Card.Title>Primary card title</Card.Title>
        <Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
    </Card.Body>
</Card.Root>

<Card.Root class="border-success mb-3" style="max-width: 18rem;">
    <Card.Header>Header</Card.Header>
    <Card.Body class="text-success">
        <Card.Title>Success card title</Card.Title>
        <Card.Text>Some quick example text to build on the card title and make up the bulk of the card's content.</Card.Text>
    </Card.Body>
</Card.Root>

Card Layout

Card Groups

Use Card.Group to render cards as a single, attached element with equal width and height columns.

Card title

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

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.

Last updated 3 mins ago

            
            <Card.Group>
    <Card.Root>
        <Card.Img position="top" src="https://placehold.co/300x180" alt="Card image cap" />
        <Card.Body>
            <Card.Title>Card title</Card.Title>
            <Card.Text>This is a wider card with supporting text below as a natural lead-in to additional content.</Card.Text>
            <Card.Text><small class="text-body-secondary">Last updated 3 mins ago</small></Card.Text>
        </Card.Body>
    </Card.Root>
    <Card.Root>
        <!-- Similar content to above -->
    </Card.Root>
    <Card.Root>
        <!-- Similar content to above -->
    </Card.Root>
</Card.Group>

Grid Cards

Use the Bootstrap grid system and its .row-cols classes to control how many grid columns you show per row.

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.

Card title

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

            
            <div class="row row-cols-1 row-cols-md-3 g-4">
    <div class="col">
        <Card.Root>
            <Card.Img position="top" src="https://placehold.co/300x180" alt="Card image cap" />
            <Card.Body>
                <Card.Title>Card title</Card.Title>
                <Card.Text>This is a longer card with supporting text below as a natural lead-in to additional content.</Card.Text>
            </Card.Body>
        </Card.Root>
    </div>
    <div class="col">
        <Card.Root>
            <!-- Similar content to above -->
        </Card.Root>
    </div>
    <div class="col">
        <Card.Root>
            <!-- Similar content to above -->
        </Card.Root>
    </div>
</div>

API Reference

Card.Root Props

Name	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the component
`elementRef`	`HTMLElement \| null`	`null`	Reference to the DOM element
`id`	`string`	card-{uid}	Unique identifier for the card element

Card.Body Props

Name	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the component
`elementRef`	`HTMLElement \| null`	`null`	Reference to the DOM element
`id`	`string`	`card-body-{uid}`	Unique ID for the pagination item element.

Card.Title Props

Name	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the component
`elementRef`	`HTMLElement \| null`	`null`	Reference to the DOM element
`id`	`string`	`card-title-{uid}`	Unique ID for the pagination item element.
`level`	`number`	`5`	Heading level for the title

Card.Subtitle Props

Name	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the component
`elementRef`	`HTMLElement \| null`	`null`	Reference to the DOM element
`id`	`string`	`card-subtitle-{uid}`	Unique ID for the pagination item element.
`level`	`number`	`5`	Heading level for the title

Card.Text Props

Name	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the component
`elementRef`	`HTMLElement \| null`	`null`	Reference to the DOM element
`id`	`string`	`card-text-{uid}`	Unique ID for the pagination item element.

Card.Img Props

Name	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the component
`elementRef`	`HTMLElement \| null`	`null`	Reference to the DOM element
`id`	`string`	`card-img-{uid}`	Unique ID for the pagination item element.
`position`	`'top' \| 'bottom' \| undefined`	-	Position of the image within the card
`src`	`string`	`''`	Source URL of the image
`alt`	`string`	`''`	Alternative text for the image

Card.ImgOverlay Props

Name	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the component
`elementRef`	`HTMLElement \| null`	`null`	Reference to the DOM element
`id`	`string`	`card-img-overlay-{uid}`	Unique ID for the pagination item element.

Card.Header Props

Name	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the component
`elementRef`	`HTMLElement \| null`	`null`	Reference to the DOM element
`id`	`string`	`card-header-{uid}`	Unique ID for the pagination item element.

Card.Footer Props

Name	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the component
`elementRef`	`HTMLElement \| null`	`null`	Reference to the DOM element
`id`	`string`	`card-footer-{uid}`	Unique ID for the pagination item element.

Card.Link Props

Name	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the component
`elementRef`	`HTMLElement \| null`	`null`	Reference to the DOM element
`href`	`string`	`#!`	URL for the link
`id`	`string`	`card-link-{uid}`	Unique ID for the pagination item element.

Card.Group Props

Name	Type	Default	Description
`class`	`string`	-	Additional CSS classes to apply to the component
`elementRef`	`HTMLElement \| null`	`null`	Reference to the DOM element
`id`	`string`	`card-group-{uid}`	Unique ID for the pagination item element.

CSS Classes

The component applies Bootstrap's card classes based on the provided props and subcomponents:

card - Applied to Card.Root
card-body - Applied to Card.Body
card-title - Applied to Card.Title
card-subtitle - Applied to Card.Subtitle
card-text - Applied to Card.Text
card-img-top - Applied to Card.Img with position="top"
card-img-bottom - Applied to Card.Img with position="bottom"
card-img - Applied to Card.Img without a position
card-img-overlay - Applied to Card.ImgOverlay
card-header - Applied to Card.Header
card-footer - Applied to Card.Footer
card-link - Applied to Card.Link
card-group - Applied to Card.Group
text-bg-* - Applied to Card.Root for contextual background colors (primary, secondary, etc.)
border-* - Applied to Card.Root for contextual border colors
w-* - Utility width classes can be applied to adjust card width