Cards

Flexible content containers with body, image, list group, header, footer, color, and layout examples.

About

A card is a bordered content container with optional captures for images, headers, bodies, and footers. Cards have no fixed width by default, so place them in grid columns, width-constrained parents, or a classified layout wrapper when the Bootstrap pattern has no dedicated helper.

The BCL card helper renders the Bootstrap card shell and captures ordered child regions such as bs-card-image-top, bs-card-header, bs-card-body, bs-card-listgroup, bs-card-overlay, bs-card-image-bottom, and bs-card-footer. Use Bootstrap utility classes on those helpers when you need alignment, spacing, borders, or contextual colors.

Example

Cards are flexible containers that stay intentionally small in their required structure while allowing many combinations of content. The basic example mixes an image cap, body content, text, and an action button with a fixed maximum width.

Sample screenshot

Card title

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

aspnet 

<bs-card style="max-width: 18rem;">
    <bs-card-image-top src="/images/XmlLogGen.png" alt="Sample screenshot" />
    <bs-card-body>
        <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Card title</bs-heading>
        <bs-p card-content="Text">Some quick example text to build on the card title and make up the bulk of the card content.</bs-p>
        <bs-button btn-style="Primary">Go somewhere</bs-button>
    </bs-card-body>
</bs-card>

Content types

Cards support body content, titles, text, links, images, list groups, and header or footer regions. Use the card child helpers for Bootstrap card-specific structure, then compose normal content inside those regions.

Body

Use bs-card-body when the card needs the standard padded body area.

This is some text within a card body.
aspnet 

<bs-card>
    <bs-card-body>This is some text within a card body.</bs-card-body>
</bs-card>

Titles, text, and links

Card titles, subtitles, text, and links are normal content inside the body capture. Keep titles, subtitles, and text inside <bs-card-body> when you want Bootstrap's card spacing to align those elements cleanly.

Card title

Card subtitle

Card text can be mixed with links and actions.

Card link Another link
aspnet 

<bs-card style="max-width: 18rem;">
    <bs-card-body>
        <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Card title</bs-heading>
        <bs-heading heading-level="Four" bottom-margin="Default2" card-content="Subtitle" heading-style-level="Six" body-text-color="Secondary">Card subtitle</bs-heading>
        <bs-p card-content="Text">Card text can be mixed with links and actions.</bs-p>
        <bs-anchor href="#" card-content="Link">Card link</bs-anchor>
        <bs-anchor href="#" card-content="Link">Another link</bs-anchor>
    </bs-card-body>
</bs-card>

Images

Use bs-card-image-top or bs-card-image-bottom to declare the image cap position directly.

Sample screenshot

The image renders with Bootstrap's top image cap class.

The image renders after the body with Bootstrap's bottom image cap class.

Sample screenshot
aspnet 

<bs-row x-gutter="Default3" y-gutter="Default3">
    <bs-div span="Six">
        <bs-card>
            <bs-card-image-top src="/images/XmlLogGen.png" alt="Sample screenshot" />
            <bs-card-body>
                <bs-p card-content="Text">The image renders with Bootstrap's top image cap class.</bs-p>
            </bs-card-body>
        </bs-card>
    </bs-div>
    <bs-div span="Six">
        <bs-card>
            <bs-card-body>
                <bs-p card-content="Text">The image renders after the body with Bootstrap's bottom image cap class.</bs-p>
            </bs-card-body>
            <bs-card-image-bottom src="/images/Icon-Generator.png" alt="Sample screenshot" />
        </bs-card>
    </bs-div>
</bs-row>

List groups

Use bs-card-listgroup inside the card to create flush groups that share the card border. List groups can stand alone, follow a header, or precede a footer.

  • An item
  • A second item
  • A third item
Featured
  • An item
  • A second item
  • A third item
  • An item
  • A second item
  • A third item
Card footer
aspnet 

<bs-row x-gutter="Default3" y-gutter="Default3">
    <bs-div span-md="Four">
        <bs-card bs-height="Relative100">
            <bs-card-listgroup flex-direction="Column">
                <bs-listgroup-item>An item</bs-listgroup-item>
                <bs-listgroup-item>A second item</bs-listgroup-item>
                <bs-listgroup-item>A third item</bs-listgroup-item>
            </bs-card-listgroup>
        </bs-card>
    </bs-div>
    <bs-div span-md="Four">
        <bs-card bs-height="Relative100">
            <bs-card-header>Featured</bs-card-header>
            <bs-card-listgroup flex-direction="Column">
                <bs-listgroup-item>An item</bs-listgroup-item>
                <bs-listgroup-item>A second item</bs-listgroup-item>
                <bs-listgroup-item>A third item</bs-listgroup-item>
            </bs-card-listgroup>
        </bs-card>
    </bs-div>
    <bs-div span-md="Four">
        <bs-card bs-height="Relative100">
            <bs-card-listgroup flex-direction="Column">
                <bs-listgroup-item>An item</bs-listgroup-item>
                <bs-listgroup-item>A second item</bs-listgroup-item>
                <bs-listgroup-item>A third item</bs-listgroup-item>
            </bs-card-listgroup>
            <bs-card-footer>Card footer</bs-card-footer>
        </bs-card>
    </bs-div>
</bs-row>

Kitchen sink

Combine image, body, list group, links, and footer captures when the card needs several content regions.

Sample screenshot

Card title

Some quick example text to build on the card title.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Card link Another link
2 days ago
aspnet 

<bs-card style="max-width: 18rem;">
    <bs-card-image-top src="/images/Icon-Generator.png" alt="Sample screenshot" />
    <bs-card-body>
        <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Card title</bs-heading>
        <bs-p card-content="Text">Some quick example text to build on the card title.</bs-p>
    </bs-card-body>
    <bs-card-listgroup flex-direction="Column">
        <bs-listgroup-item>Cras justo odio</bs-listgroup-item>
        <bs-listgroup-item>Dapibus ac facilisis in</bs-listgroup-item>
        <bs-listgroup-item>Vestibulum at eros</bs-listgroup-item>
    </bs-card-listgroup>
    <bs-card-body>
        <bs-anchor href="#" card-content="Link">Card link</bs-anchor>
        <bs-anchor href="#" card-content="Link">Another link</bs-anchor>
    </bs-card-body>
    <bs-card-footer body-text-color="Secondary">2 days ago</bs-card-footer>
</bs-card>

Header and footer

Add <bs-card-header> and <bs-card-footer> when a card needs sectioned content above or below the body. Headers can contain headings while preserving card header styling.

Featured

Special title treatment

Use header captures for sectioned cards.

Featured

Special title treatment

A header can use heading semantics while keeping Bootstrap card styling.

Quote

A well-known quote, contained in a blockquote element.

Someone famous in Source Title
Featured

Special title treatment

Footer captures align with the rest of the card content.

2 days ago
aspnet 

<bs-row x-gutter="Default3" y-gutter="Default3">
    <bs-div span-lg="Six">
        <bs-card bs-height="Relative100">
            <bs-card-header>Featured</bs-card-header>
            <bs-card-body>
                <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Special title treatment</bs-heading>
                <bs-p card-content="Text">Use header captures for sectioned cards.</bs-p>
                <bs-button btn-style="Primary">Go somewhere</bs-button>
            </bs-card-body>
        </bs-card>
    </bs-div>
    <bs-div span-lg="Six">
        <bs-card bs-height="Relative100">
            <bs-card-header><bs-heading heading-level="Three" heading-style-level="Five" bottom-margin="None">Featured</bs-heading></bs-card-header>
            <bs-card-body>
                <bs-heading heading-level="Four" card-content="Title" heading-style-level="Five">Special title treatment</bs-heading>
                <bs-p card-content="Text">A header can use heading semantics while keeping Bootstrap card styling.</bs-p>
                <bs-button btn-style="Primary">Go somewhere</bs-button>
            </bs-card-body>
        </bs-card>
    </bs-div>
    <bs-div span-lg="Six">
        <bs-card bs-height="Relative100">
            <bs-card-header>Quote</bs-card-header>
            <bs-card-body>
                <bs-figure bottom-margin="None">
                    <bs-blockquote>
                        <bs-p>A well-known quote, contained in a blockquote element.</bs-p>
                    </bs-blockquote>
                    <bs-blockquote-footer bottom-margin="None">
                        Someone famous in <cite title="Source Title">Source Title</cite>
                    </bs-blockquote-footer>
                </bs-figure>
            </bs-card-body>
        </bs-card>
    </bs-div>
    <bs-div span-lg="Six">
        <bs-card text-alignment="Center" bs-height="Relative100">
            <bs-card-header>Featured</bs-card-header>
            <bs-card-body>
                <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Special title treatment</bs-heading>
                <bs-p card-content="Text">Footer captures align with the rest of the card content.</bs-p>
                <bs-button btn-style="Primary">Go somewhere</bs-button>
            </bs-card-body>
            <bs-card-footer body-text-color="Secondary">2 days ago</bs-card-footer>
        </bs-card>
    </bs-div>
</bs-row>

Sizing

Cards have no fixed width by default. Use grid columns, sizing utilities, or local CSS to control width while keeping the bs-card structure unchanged.

Using grid markup

Use grid helpers around cards when the layout should control card width. Each card remains a normal <bs-card> inside the grid column.

Special title treatment

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

Special title treatment

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

aspnet 

<bs-row x-gutter="Default3" y-gutter="Default3">
    <bs-div span-sm="Six">
        <bs-card>
            <bs-card-body>
                <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Special title treatment</bs-heading>
                <bs-p card-content="Text">With supporting text below as a natural lead-in to additional content.</bs-p>
                <bs-button btn-style="Primary">Go somewhere</bs-button>
            </bs-card-body>
        </bs-card>
    </bs-div>
    <bs-div span-sm="Six">
        <bs-card>
            <bs-card-body>
                <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Special title treatment</bs-heading>
                <bs-p card-content="Text">With supporting text below as a natural lead-in to additional content.</bs-p>
                <bs-button btn-style="Primary">Go somewhere</bs-button>
            </bs-card-body>
        </bs-card>
    </bs-div>
</bs-row>

Using utilities

Use sizing and spacing utility attributes or classes when a card needs a quick per-instance width without a dedicated layout wrapper.

Card title

Sizing utilities can set a responsive width on the card.

Card title

Use smaller utility widths when the parent layout allows it.

aspnet 

<bs-card bottom-margin="Default3" bs-width="Relative75">
    <bs-card-body>
        <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Card title</bs-heading>
        <bs-p card-content="Text">Sizing utilities can set a responsive width on the card.</bs-p>
        <bs-button btn-style="Primary">Button</bs-button>
    </bs-card-body>
</bs-card>
<bs-card bs-width="Relative50">
    <bs-card-body>
        <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Card title</bs-heading>
        <bs-p card-content="Text">Use smaller utility widths when the parent layout allows it.</bs-p>
        <bs-button btn-style="Primary">Button</bs-button>
    </bs-card-body>
</bs-card>

Using custom CSS

When a design needs a reusable card width, keep the custom rule in site CSS and apply its class to bs-card. The docs sample remains a placeholder until visual approval.

css 

.docs-card-narrow {
max-width: 32rem;
}

Text alignment

Use text alignment utility attributes or classes on the card or on specific card child helpers to align card content without changing the card structure.

Start aligned text

Cards inherit normal start alignment unless a text utility changes it.

Center aligned text

Text alignment utilities flow through the card body.

Right aligned text

Alignment can be changed without changing card structure.

aspnet 

<bs-row x-gutter="Default3" y-gutter="Default3">
    <bs-div span-lg="Four">
        <bs-card text-alignment="Center">
            <bs-card-body>
                <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Start aligned text</bs-heading>
                <bs-p card-content="Text">Cards inherit normal start alignment unless a text utility changes it.</bs-p>
                <bs-button btn-style="Primary">Action</bs-button>
            </bs-card-body>
        </bs-card>
    </bs-div>
    <bs-div span-lg="Four">
        <bs-card text-alignment="Center">
            <bs-card-body>
                <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Center aligned text</bs-heading>
                <bs-p card-content="Text">Text alignment utilities flow through the card body.</bs-p>
                <bs-button btn-style="Primary">Action</bs-button>
            </bs-card-body>
        </bs-card>
    </bs-div>
    <bs-div span-lg="Four">
        <bs-card text-alignment="End">
            <bs-card-body>
                <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Right aligned text</bs-heading>
                <bs-p card-content="Text">Alignment can be changed without changing card structure.</bs-p>
                <bs-button btn-style="Primary" outline="true">Action</bs-button>
            </bs-card-body>
        </bs-card>
    </bs-div>
</bs-row>

Navigation

Use the BCL nav helpers inside bs-card-header when the card needs tabs or pills.

Tabbed card

Card header tabs use the nav helpers with Bootstrap's card header tab class.

Pill card

Card header pills use the same nav helpers with the pill variant.

aspnet 

<bs-row x-gutter="Default3" y-gutter="Default3">
    <bs-div span="Six">
        <bs-card text-alignment="Center">
            <bs-card-header>
                <bs-nav nav-style="Tabs" card-content="HeaderTabs">
                    <bs-nav-item href="#" is-active="true">Active</bs-nav-item>
                    <bs-nav-item href="#">Link</bs-nav-item>
                    <bs-nav-item href="#" disabled="true">Disabled</bs-nav-item>
                </bs-nav>
            </bs-card-header>
            <bs-card-body>
                <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Tabbed card</bs-heading>
                <bs-p card-content="Text">Card header tabs use the nav helpers with Bootstrap's card header tab class.</bs-p>
            </bs-card-body>
        </bs-card>
    </bs-div>
    <bs-div span="Six">
        <bs-card text-alignment="Center">
            <bs-card-header>
                <bs-nav nav-style="Pills" card-content="HeaderPills">
                    <bs-nav-item href="#" is-active="true">Active</bs-nav-item>
                    <bs-nav-item href="#">Link</bs-nav-item>
                    <bs-nav-item href="#" disabled="true">Disabled</bs-nav-item>
                </bs-nav>
            </bs-card-header>
            <bs-card-body>
                <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Pill card</bs-heading>
                <bs-p card-content="Text">Card header pills use the same nav helpers with the pill variant.</bs-p>
            </bs-card-body>
        </bs-card>
    </bs-div>
</bs-row>

Images

Card images can be rendered as top or bottom caps. Overlay content is positioned over the image by Bootstrap's overlay class.

Image caps

Use <bs-card-image-top> and <bs-card-image-bottom> for top and bottom image caps.

Sample screenshot

Card title

Top image caps round the upper corners of the card.

Last updated 3 mins ago

Card title

Bottom image caps round the lower corners of the card.

Last updated 3 mins ago

Sample screenshot
aspnet 

<bs-row x-gutter="Default3" y-gutter="Default3">
    <bs-div span-md="Six">
        <bs-card>
            <bs-card-image-top src="/images/XmlLogGen.png" alt="Sample screenshot" />
            <bs-card-body>
                <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Card title</bs-heading>
                <bs-p card-content="Text">Top image caps round the upper corners of the card.</bs-p>
                <bs-p card-content="Text"><bs-small body-text-color="Secondary">Last updated 3 mins ago</bs-small></bs-p>
            </bs-card-body>
        </bs-card>
    </bs-div>
    <bs-div span-md="Six">
        <bs-card bs-height="Relative100">
            <bs-card-body>
                <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Card title</bs-heading>
                <bs-p card-content="Text">Bottom image caps round the lower corners of the card.</bs-p>
                <bs-p card-content="Text"><bs-small body-text-color="Secondary">Last updated 3 mins ago</bs-small></bs-p>
            </bs-card-body>
            <bs-card-image-bottom src="/images/Icon-Generator.png" alt="Sample screenshot" />
        </bs-card>
    </bs-div>
</bs-row>

Image overlays

Use bs-card-overlay after the image to render Bootstrap's positioned overlay child.

Sample screenshot

Card title

Overlay text sits over the image and should be kept short enough to stay readable.

Last updated 3 mins ago

aspnet 

<bs-card bg-color="Dark" bg-contrasts-text="true" style="max-width: 32rem;">
    <bs-card-image-top src="/images/XmlLogGen.png" alt="Sample screenshot" />
    <bs-card-overlay display="Flex" flex-direction="Column" justify-content="End">
        <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Card title</bs-heading>
        <bs-p card-content="Text">Overlay text sits over the image and should be kept short enough to stay readable.</bs-p>
        <bs-p card-content="Text"><bs-small>Last updated 3 mins ago</bs-small></bs-p>
    </bs-card-overlay>
</bs-card>

Horizontal

For horizontal cards, compose a no-gutter row inside the card and place image/body regions in columns.

Sample screenshot

Horizontal card

This layout combines a grid row with the card helper so image and body content sit side by side.

Last updated 3 mins ago

aspnet 

<bs-card style="max-width: 42rem;">
    <bs-row gutter="None">
        <bs-div span-md="Four">
            <bs-img src="/images/XmlLogGen.png" alt="Sample screenshot" bs-height="Relative100" fluid="true" border-rounding="Start" object-fit="Cover" />
        </bs-div>
        <bs-div span-md="Eight">
            <bs-card-body>
                <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Horizontal card</bs-heading>
                <bs-p card-content="Text">This layout combines a grid row with the card helper so image and body content sit side by side.</bs-p>
                <bs-p card-content="Text"><bs-small body-text-color="Secondary">Last updated 3 mins ago</bs-small></bs-p>
            </bs-card-body>
        </bs-div>
    </bs-row>
</bs-card>

Card styles

Contextual backgrounds, text colors, and borders are Bootstrap utility classes applied to the card or its child helpers.

Background and color

Use Bootstrap color utilities directly on BCL card helpers for contextual card treatments. Keep text contrast readable when using filled backgrounds.

Header

Primary card title

Contextual backgrounds apply to the whole card.

Header

Secondary card title

Use the same helper with a different color class.

Header

Success card title

Filled variants should keep foreground contrast readable.

Header

Danger card title

Bootstrap utility classes remain composable.

Header

Warning card title

Use contextual colors for stateful content.

Header

Info card title

Color helpers work directly on bs-card.

Header

Light card title

Light cards remain useful on dark or tinted surfaces.

Header

Dark card title

Dark cards pair background and foreground colors.

aspnet 

<bs-row x-gutter="Default3" y-gutter="Default3">
    <bs-div span-md="Six" span-xl="Three">
        <bs-card bg-color="Primary" bg-contrasts-text="true" bs-height="Relative100">
            <bs-card-header>Header</bs-card-header>
            <bs-card-body>
                <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Primary card title</bs-heading>
                <bs-p card-content="Text">Contextual backgrounds apply to the whole card.</bs-p>
            </bs-card-body>
        </bs-card>
    </bs-div>
    <bs-div span-md="Six" span-xl="Three">
        <bs-card bg-color="Secondary" bg-contrasts-text="true" bs-height="Relative100">
            <bs-card-header>Header</bs-card-header>
            <bs-card-body>
                <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Secondary card title</bs-heading>
                <bs-p card-content="Text">Use the same helper with a different color class.</bs-p>
            </bs-card-body>
        </bs-card>
    </bs-div>
    <bs-div span-md="Six" span-xl="Three">
        <bs-card bg-color="Success" bg-contrasts-text="true" bs-height="Relative100">
            <bs-card-header>Header</bs-card-header>
            <bs-card-body>
                <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Success card title</bs-heading>
                <bs-p card-content="Text">Filled variants should keep foreground contrast readable.</bs-p>
            </bs-card-body>
        </bs-card>
    </bs-div>
    <bs-div span-md="Six" span-xl="Three">
        <bs-card bg-color="Danger" bg-contrasts-text="true" bs-height="Relative100">
            <bs-card-header>Header</bs-card-header>
            <bs-card-body>
                <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Danger card title</bs-heading>
                <bs-p card-content="Text">Bootstrap utility classes remain composable.</bs-p>
            </bs-card-body>
        </bs-card>
    </bs-div>
    <bs-div span-md="Six" span-xl="Three">
        <bs-card bg-color="Warning" bg-contrasts-text="true" bs-height="Relative100">
            <bs-card-header>Header</bs-card-header>
            <bs-card-body>
                <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Warning card title</bs-heading>
                <bs-p card-content="Text">Use contextual colors for stateful content.</bs-p>
            </bs-card-body>
        </bs-card>
    </bs-div>
    <bs-div span-md="Six" span-xl="Three">
        <bs-card bg-color="Info" bg-contrasts-text="true" bs-height="Relative100">
            <bs-card-header>Header</bs-card-header>
            <bs-card-body>
                <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Info card title</bs-heading>
                <bs-p card-content="Text">Color helpers work directly on <code>bs-card</code>.</bs-p>
            </bs-card-body>
        </bs-card>
    </bs-div>
    <bs-div span-md="Six" span-xl="Three">
        <bs-card bg-color="Light" bg-contrasts-text="true" bs-height="Relative100">
            <bs-card-header>Header</bs-card-header>
            <bs-card-body>
                <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Light card title</bs-heading>
                <bs-p card-content="Text">Light cards remain useful on dark or tinted surfaces.</bs-p>
            </bs-card-body>
        </bs-card>
    </bs-div>
    <bs-div span-md="Six" span-xl="Three">
        <bs-card bg-color="Dark" bg-contrasts-text="true" bs-height="Relative100">
            <bs-card-header>Header</bs-card-header>
            <bs-card-body>
                <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Dark card title</bs-heading>
                <bs-p card-content="Text">Dark cards pair background and foreground colors.</bs-p>
            </bs-card-body>
        </bs-card>
    </bs-div>
</bs-row>

Border

Primary border

Primary card

Border utilities apply to the card shell.

Success border

Success card

Text and border utilities can be combined.

Footer
Danger border

Danger card

Use contrast-safe utility combinations.

aspnet 

<bs-row x-gutter="Default3" y-gutter="Default3">
    <bs-div span-md="Four">
        <bs-card bs-height="Relative100" border-color="Primary">
            <bs-card-header text-color="Primary">Primary border</bs-card-header>
            <bs-card-body text-color="Primary">
                <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Primary card</bs-heading>
                <bs-p card-content="Text">Border utilities apply to the card shell.</bs-p>
            </bs-card-body>
        </bs-card>
    </bs-div>
    <bs-div span-md="Four">
        <bs-card bs-height="Relative100" border-color="Success">
            <bs-card-header bg-color="Transparent" border-color="Success" text-color="Success">Success border</bs-card-header>
            <bs-card-body text-color="Success">
                <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Success card</bs-heading>
                <bs-p card-content="Text">Text and border utilities can be combined.</bs-p>
            </bs-card-body>
            <bs-card-footer bg-color="Transparent" border-color="Success" text-color="Success">Footer</bs-card-footer>
        </bs-card>
    </bs-div>
    <bs-div span-md="Four">
        <bs-card bs-height="Relative100" border-color="Danger">
            <bs-card-header text-color="Danger">Danger border</bs-card-header>
            <bs-card-body text-color="Danger">
                <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Danger card</bs-heading>
                <bs-p card-content="Text">Use contrast-safe utility combinations.</bs-p>
            </bs-card-body>
        </bs-card>
    </bs-div>
</bs-row>

Mixins utilities

Bootstrap's Sass mixins and utilities can generate additional card variants. BCL docs should continue to render card structure with bs-card and reserve custom variant generation for library or site CSS.

Card layout

Card groups, grid cards, and masonry are layout patterns around card helpers. Use BCL card helpers for each card, use bs-card-group for grouped cards, and use BCL grid helpers where they exist.

Card groups

Sample screenshot

Card title

Card groups make sibling cards equal height. This card has a little bit longer supporting text.

Last updated 3 mins ago
Sample screenshot

Card title

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

Last updated 3 mins ago
Sample screenshot

Card title

This card has even longer content than the first to show equal height action in a grouped layout.

Last updated 3 mins ago
aspnet 

<bs-card-group bottom-margin="Default3">
    <bs-card>
        <bs-card-image-top src="/images/XmlLogGen.png" alt="Sample screenshot" />
        <bs-card-body>
            <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Card title</bs-heading>
            <bs-p card-content="Text">Card groups make sibling cards equal height. This card has a little bit longer supporting text.</bs-p>
        </bs-card-body>
        <bs-card-footer><bs-small body-text-color="Secondary">Last updated 3 mins ago</bs-small></bs-card-footer>
    </bs-card>
    <bs-card>
        <bs-card-image-top src="/images/Icon-Generator.png" alt="Sample screenshot" />
        <bs-card-body>
            <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Card title</bs-heading>
            <bs-p card-content="Text">This card has supporting text below as a natural lead-in to additional content.</bs-p>
        </bs-card-body>
        <bs-card-footer><bs-small body-text-color="Secondary">Last updated 3 mins ago</bs-small></bs-card-footer>
    </bs-card>
    <bs-card>
        <bs-card-image-top src="/images/XmlLogGen.png" alt="Sample screenshot" />
        <bs-card-body>
            <bs-heading heading-level="Three" card-content="Title" heading-style-level="Five">Card title</bs-heading>
            <bs-p card-content="Text">This card has even longer content than the first to show equal height action in a grouped layout.</bs-p>
        </bs-card-body>
        <bs-card-footer><bs-small body-text-color="Secondary">Last updated 3 mins ago</bs-small></bs-card-footer>
    </bs-card>
</bs-card-group>

Grid cards

Grid card
Grid card
aspnet 

<bs-row x-gutter="Default3" y-gutter="Default3">
    <bs-div span="Six">
        <bs-card>
            <bs-card-body>Grid card</bs-card-body>
        </bs-card>
    </bs-div>
    <bs-div span="Six">
        <bs-card>
            <bs-card-body>Grid card</bs-card-body>
        </bs-card>
    </bs-div>
</bs-row>

Masonry

Bootstrap's masonry example depends on the masonry plugin. BCL has no masonry helper or plugin initializer, so this is classified as out of helper scope for now; pages that adopt masonry should initialize the plugin explicitly while preserving bs-card for each card.

aspnet 

<bs-row x-gutter="Default3" y-gutter="Default3" data-masonry='{"percentPosition": true}'>
<bs-div span="Four">
    <bs-card>
        <bs-card-body>Masonry card</bs-card-body>
    </bs-card>
</bs-div>
</bs-row>
<script>
new Masonry('[data-masonry]', { percentPosition: true });
</script>

CSS

Bootstrap card colors, spacing, borders, caps, and group behavior are driven by compiled CSS variables and Sass variables. BCL helpers render the documented card structure while theme customization stays in the approved Bootstrap stylesheet.

Variables

Use Bootstrap's card CSS variables for theme-level overrides such as card spacing, title spacing, border color, background, and cap color.

Sass variables

Card Sass variables remain stylesheet concerns; use helper attributes and utility classes for per-instance markup.