Skip to main content

Blazor Card

BootstrapBootstrap's cards provide a flexible and extensible content container with multiple variants and options.

Blazor Bootstrap: Card component

About

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

Parameters

Card Parameters

NameTypeDefaultRequiredDescriptionAdded Version
ChildContentRenderFragmentnull✔️Gets or sets the content to be rendered within the component.1.10.0
ColorCardColorCardColor.NoneGets or sets the card color.1.10.0
TextAlignmentAlignmentAlignment.NoneGets or sets the text alignment of the card.1.10.0

CardBody Parameters

NameTypeDefaultRequiredDescriptionAdded Version
ChildContentRenderFragmentnull✔️Gets or sets the content to be rendered within the component.1.10.0

CardFooter Parameters

NameTypeDefaultRequiredDescriptionAdded Version
ChildContentRenderFragmentnull✔️Gets or sets the content to be rendered within the component.1.10.0

CardGroup Parameters

NameTypeDefaultRequiredDescriptionAdded Version
ChildContentRenderFragmentnull✔️Gets or sets the content to be rendered within the component.1.10.0

CardHeader Parameters

NameTypeDefaultRequiredDescriptionAdded Version
ChildContentRenderFragmentnull✔️Gets or sets the content to be rendered within the component.1.10.0
ColorCardColorCardColor.NoneGets or sets the card header color.1.10.4
NameTypeDefaultRequiredDescriptionAdded Version
ChildContentRenderFragmentnull✔️Gets or sets the content to be rendered within the component.1.10.0
DisabledboolfalseIf true, disables the card link.1.10.0
TabIndexint?nullGets or sets the card link tab index.1.10.0
TargetTargetTarget.NoneGets or sets the card link target.1.10.0
Tostring?nullGets or sets the link href attribute.1.10.0

CardSubTitle Parameters

NameTypeDefaultRequiredDescriptionAdded Version
ChildContentRenderFragmentnull✔️Gets or sets the content to be rendered within the component.1.10.0
SizeHeadingSizeHeadingSize.H6Gets or sets the card sub title size.1.10.0

CardText Parameters

NameTypeDefaultRequiredDescriptionAdded Version
ChildContentRenderFragmentnull✔️Gets or sets the content to be rendered within the component.1.10.0

CardTitle Parameters

NameTypeDefaultRequiredDescriptionAdded Version
ChildContentRenderFragmentnull✔️Gets or sets the content to be rendered within the component.1.10.0
SizeHeadingSizeHeadingSize.H5Gets or sets the card title size.1.10.0

Examples

Card

Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element.

Blazor Bootstrap: Card Component - Examples
<Card Style="width:18rem;">
<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>
<Button Color="ButtonColor.Primary" To="#" Type="ButtonType.Link">Go somewhere</Button>
</CardBody>
</Card>

See the demo here.

Content types

Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.

Body

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

Blazor Bootstrap: Card Component - Body
<Card>
<CardBody>
This is some text within a card body.
</CardBody>
</Card>

See the demo here.

Blazor Bootstrap: Card Component - Titles, text, and links
<Card Style="width:18rem;">
<CardBody>
<CardTitle>Card title</CardTitle>
<CardSubTitle Class="mb-2 text-muted">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 To="#">Card link</CardLink>
<CardLink To="#">Another link</CardLink>
</CardBody>
</Card>

See the demo here.

Images

Blazor Bootstrap: Card Component - Images
<Card Class="mb-4" Style="width:18rem;">
<img class="rounded-top" src="/images/placeholder.png" alt="placeholder" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardSubTitle Class="mb-2 text-muted">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>
<Button Color="ButtonColor.Primary" To="#" Type="ButtonType.Link">Go somewhere</Button>
</CardBody>
</Card>

<Card Style="width:18rem;">
<CardBody>
<CardTitle>Card title</CardTitle>
<CardSubTitle Class="mb-2 text-muted">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>
<Button Color="ButtonColor.Primary" To="#" Type="ButtonType.Link">Go somewhere</Button>
</CardBody>
<img class="rounded-bottom" src="/images/placeholder.png" alt="placeholder" />
</Card>

See the demo here.

List groups

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

Blazor Bootstrap: Card Component - List groups
<Card Style="width: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>

See the demo here.

Kitchen sink

Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.

Blazor Bootstrap: Card Component - Kitchen sink
<Card Style="width:18rem;">
<img class="rounded-top" src="/images/placeholder.png" alt="placeholder" />
<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>
<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>
<CardBody>
<CardLink To="#">Card link</CardLink>
<CardLink To="#">Another link</CardLink>
</CardBody>
</Card>

See the demo here.

Add an optional header and/or footer within a card.

Blazor Bootstrap: Card Component - Header and footer
<Card Style="width:18rem;">
<CardHeader>
Featured
</CardHeader>
<CardBody>
<CardTitle>Special title treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
<Button Color="ButtonColor.Primary" To="#" Type="ButtonType.Link">Go somewhere</Button>
</CardBody>
</Card>

See the demo here.

Sizing

Cards assume no specific width to start, so they’ll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.

Blazor Bootstrap: Card Component - Sizing
<div class="row">
<div class="col-sm-6">
<Card>
<CardBody>
<CardTitle>Special title treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
<Button Color="ButtonColor.Primary" To="#" Type="ButtonType.Link">Go somewhere</Button>
</CardBody>
</Card>
</div>
<div class="col-sm-6">
<Card>
<CardBody>
<CardTitle>Special title treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
<Button Color="ButtonColor.Primary" To="#" Type="ButtonType.Link">Go somewhere</Button>
</CardBody>
</Card>
</div>
</div>

See the demo here.

Text alignment

You can quickly change the text alignment of any card—in its entirety or specific parts—with our TextAlignment parameter.

Blazor Bootstrap: Card Component - Text alignment
<Card Class="mb-4" Style="width:18rem;">
<CardBody>
<CardTitle>Special title treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
<Button Color="ButtonColor.Primary" To="#" Type="ButtonType.Link">Go somewhere</Button>
</CardBody>
</Card>

<Card TextAlignment="Alignment.Center" Class="mb-4" Style="width:18rem;">
<CardBody>
<CardTitle>Special title treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
<Button Color="ButtonColor.Primary" To="#" Type="ButtonType.Link">Go somewhere</Button>
</CardBody>
</Card>

<Card TextAlignment="Alignment.End" Class="mb-4" Style="width:18rem;">
<CardBody>
<CardTitle>Special title treatment</CardTitle>
<CardText>With supporting text below as a natural lead-in to additional content.</CardText>
<Button Color="ButtonColor.Primary" To="#" Type="ButtonType.Link">Go somewhere</Button>
</CardBody>
</Card>

See the demo here.

Background and color

Blazor Bootstrap: Card Component - Background and color - Primary, Secondary, SuccessBlazor Bootstrap: Card Component - Background and color - Danger, Warning, InfoBlazor Bootstrap: Card Component - Background and color - Light, Dark
<Card Color="CardColor.Primary" Class="mb-4" Style="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="CardColor.Secondary" Class="mb-4" Style="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="CardColor.Success" Class="mb-4" Style="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="CardColor.Danger" Class="mb-4" Style="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="CardColor.Warning" Class="mb-4" Style="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="CardColor.Info" Class="mb-4" Style="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="CardColor.Light" Class="mb-4" Style="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="CardColor.Dark" Class="mb-4" Style="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>

See the demo here.

Card groups

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint.

Blazor Bootstrap: Card Component - Card groups
<CardGroup>
<Card Class="mb-4" Style="width:18rem;">
<img src="/images/placeholder.png" alt="placeholder" />
<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 Class="text-muted">Last updated 3 mins ago</CardText>
</CardBody>
</Card>
<Card Class="mb-4" Style="width:18rem;">
<img src="/images/placeholder.png" alt="placeholder" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
<CardText Class="text-muted">Last updated 3 mins ago</CardText>
</CardBody>
</Card>
<Card Class="mb-4" Style="width:18rem;">
<img src="/images/placeholder.png" alt="placeholder" />
<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 Class="text-muted">Last updated 3 mins ago</CardText>
</CardBody>
</Card>
</CardGroup>

See the demo here.

When using card groups with footers, their content will automatically line up.

Blazor Bootstrap: Card Component - Card groups with footer
<CardGroup>
<Card Class="mb-4" Style="width:18rem;">
<img src="/images/placeholder.png" alt="placeholder" />
<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>
</CardBody>
<CardFooter>
<small class="text-muted">Last updated 3 mins ago</small>
</CardFooter>
</Card>
<Card Class="mb-4" Style="width:18rem;">
<img src="/images/placeholder.png" alt="placeholder" />
<CardBody>
<CardTitle>Card title</CardTitle>
<CardText>This card has supporting text below as a natural lead-in to additional content.</CardText>
</CardBody>
<CardFooter>
<small class="text-muted">Last updated 3 mins ago</small>
</CardFooter>
</Card>
<Card Class="mb-4" Style="width:18rem;">
<img src="/images/placeholder.png" alt="placeholder" />
<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>
</CardBody>
<CardFooter>
<small class="text-muted">Last updated 3 mins ago</small>
</CardFooter>
</Card>
</CardGroup>

See the demo here.