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​

NameTypeDescriptionRequiredDefaultAdded Version
ChildContentRenderFragmentSpecifies the content to be rendered inside this.✔️1.10.0
ColorCardColorGets or sets the card color.CardColor.None1.10.0
TextAlignmentAlignmentGets or sets the text alignment of the card.Alignment.None1.10.0

CardBody Parameters​

NameTypeDescriptionRequiredDefaultAdded Version
ChildContentRenderFragmentSpecifies the content to be rendered inside this.✔️1.10.0

CardFooter Parameters​

NameTypeDescriptionRequiredDefaultAdded Version
ChildContentRenderFragmentSpecifies the content to be rendered inside this.✔️1.10.0

CardGroup Parameters​

NameTypeDescriptionRequiredDefaultAdded Version
ChildContentRenderFragmentSpecifies the content to be rendered inside this.✔️1.10.0

CardHeader Parameters​

NameTypeDescriptionRequiredDefaultAdded Version
ChildContentRenderFragmentSpecifies the content to be rendered inside this.✔️1.10.0
ColorCardColorGets or sets the card color.CardColor.None1.10.4
NameTypeDescriptionRequiredDefaultAdded Version
ChildContentRenderFragmentSpecifies the content to be rendered inside this.✔️1.10.0
DisabledboolWhen set to 'true', disables the component's functionality and places it in a disabled state.1.10.0
Tostring?Gets or sets the target route.✔️1.10.0
TargetTargetThe target attribute specifies where to open the linked document.Target.None1.10.0
TabIndexint?If defined, indicates that its element can be focused and can participates in sequential keyboard navigation.1.10.0

CardSubTitle Parameters​

NameTypeDescriptionRequiredDefaultAdded Version
ChildContentRenderFragmentSpecifies the content to be rendered inside this.✔️1.10.0
SizeHeadingSizeGets or sets the heading size.HeadingSize.H61.10.0

CardText Parameters​

NameTypeDescriptionRequiredDefaultAdded Version
ChildContentRenderFragmentSpecifies the content to be rendered inside this.✔️1.10.0

CardTitle Parameters​

NameTypeDescriptionRequiredDefaultAdded Version
ChildContentRenderFragmentSpecifies the content to be rendered inside this.✔️1.10.0
SizeHeadingSizeGets or sets the heading size.HeadingSize.H51.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.