Blazor Card

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

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.

Examples#

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.
Card title

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

Go somewhere
razor 
<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>

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.
This is some text within a card body.
razor 
<Card>
    <CardBody>
        This is some text within a card body.
    </CardBody>
</Card>

Titles, text, and links#

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
razor 
<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>

Images#

List groups#

Create lists of content in a card with a flush list group.
  • An item
  • A second item
  • A third item
razor 
<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>

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.
placeholder
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
razor 
<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>
Add an optional header and/or footer within a card.
Featured
Special title treatment

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

Go somewhere
razor 
<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>

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.
Special title treatment

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

Go somewhere
Special title treatment

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

Go somewhere
razor 
<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>

Text alignment#

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

Background and color#

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.
When using card groups with footers, their content will automatically line up.
If you like Blazor Bootstrap, give it a star on GitHub!
Blazor Bootstrap Blazor Bootstrap
Links
Guides
Community