Top placement

Default top placement - image always comes first in the card with text or other content below. Use .card-img-top image class to round top image corners.

Example of the card image, placed right after card header and before card content body. Image requires .img-fluid class for proper sizing.

Middle placement

Example of middle placement - image placed between card content containers (card header, card body and card footer). Image requires .img-fluid class for proper sizing.

Multiple titles

Another example of middle image placement - after header, before body that includes card title. Image also requires .img-fluid class.

Bottom placement

Example of bottom placement - image always comes last in the card with text or other content above. Use .card-img-bottom image class to round bottom image corners.

Multiple footers

In this example card image is on top, but content has multiple containers - use spacing utility classes to control vertical spacing of card content.

Linked image

By default, cards are designed to showcase linked images with minimal required markup, including default class for rounded corners.

Zooming

Extend card image with simple zoomable lightbox. The icon is inserted directly in HTML and can be easily changed.

Overlay buttons

Add as many buttons or links as you want, all of them will be vertically and horizontally centered. Supports all available styles.

Top placement

Default top placement - video always comes first in the card with text or other content below. Use .card-img-top helper class to round top video container corners.

Middle placement

Example of middle placement - video placed between card content containers (header, body and footer). Middle option doesn't require any additional video container classes.

Bottom placement

Example of bottom placement - video always comes last in the card with text or other content above. Use .card-img-bottom helper class to round bottom video container corners.

White header and footer

This example demonstrates how header and footer can handle multiple text containers. Both containers have white background color.

Dark header, transparent footer

You can easily mix header and footer styles on the fly just by adding utility classes to the footer and header containers.

Transparent header, white footer

This combination can be useful when your main content and actions need to be separated, but visually be a part of the card.

Grey header and footer

In this example header and footer have light grey background color. Grey color is default for the footer, but header requires .bg-light class.

Transparent header, dark footer

This example demonstrates transparent card header and dark card footer. Card title is placed inside card body content.

Transparent header and footer

If you need to extend the card with 2 extra areas with context info without separation, this combination might be very useful.

Custom header and footer color

You can easily mix footer and header colors - just add color helper class to both containers and optional .text-white class to links.

Grey header, transparent footer

And this combination is a perfect solution for displaying header with alternate content that is not really important, but nice to have.

Left alignment

Left content alignment is the default option in left-to-right direction that doesn't require any extra utility classes.

Text list group

Create lists of content in a card with a flush list group. Use .list-group-flush class to remove borders and rounded corners.

Linked list group

Actionable list group items with hover, disabled, and active states. Use flex utility classes if your list items contain badges, text etc.

Multi column

Simple example of list nav with multiple columns. Use a set of responsive flex and spacing utility classes for proper positioning and spacing.