##### Amara Evans

amara@example.com

Pro

### Upgrade to Pro

Get access to all features

- Advanced Analytics
- Team Collaboration
- API Access

Upgrade Now
Upgrade to Pro
Log Out

# Cards

Cards are versatile containers that help organize and present content in a clean, engaging way. They support various content types including text, images, lists, and interactive elements, making them perfect for dashboards, product displays, and feature highlights.

### Examples

Below are various card examples demonstrating different styles and use cases. Each example showcases the flexibility and versatility of Bootstrap's card component.

Basic Card Example
Loading...
Basic Card Example
Loading...

### Content Types

Cards are highly flexible containers that can house various types of content. From simple text to rich media elements, cards adapt to your content needs while maintaining a consistent design language.

### Card Body

The card body is the primary content container within a card. Using the `card-body` class creates a padded section that can contain any type of content while maintaining consistent spacing and alignment.

Simple Card Body
Loading...
Simple Card Body
Loading...

### Titles, Text, and Links

Cards support various text elements including titles, subtitles, body text, and links. The `card-title` and `card-subtitle` classes help establish content hierarchy, while `card-text` and `card-link` provide additional formatting options.

Card with Text Elements
Loading...
Card with Text Elements
Loading...

### Images in Cards

Images can be seamlessly integrated into cards using the `card-img-top`, `card-img-bottom`, or `card-img-overlay` classes. These classes ensure proper image sizing and positioning while maintaining the card's responsive behavior.

Card with Image
Loading...
Card with Image
Loading...

### List Groups

Combine cards with list groups to create organized, structured content. The `list-group-flush` class removes outer borders and rounded corners to render list items edge-to-edge in a card.

Card with List Group
Loading...
Card with List Group
Loading...

### Kitchen Sink

The kitchen sink example demonstrates how various card components can be combined to create a comprehensive content display. This example includes images, text, lists, and links, showcasing the card component's versatility.

Kitchen Sink Example
Loading...
Kitchen Sink Example
Loading...

### Card Headers

Add a header to your card using the `card-header` class. Headers can contain titles, icons, or even navigation components to enhance the card's functionality and appearance.

Card with Header
Loading...
Card with Header
Loading...

Headers can also be styled using heading elements (`h1` through `h6`) with the `card-header` class for additional emphasis and semantic structure.

Card with Header Title
Loading...
Card with Header Title
Loading...

### Card Sizing

Cards can be sized using various approaches including custom CSS, grid classes, and utility classes. By default, cards expand to 100% width, but you can control their dimensions to create layouts that best suit your content and design needs.

### Grid System Integration

Leverage Bootstrap's powerful grid system to create responsive card layouts. Using classes like `col-sm-6` allows cards to adapt their layout based on screen size, ensuring an optimal viewing experience across devices.

Cards in Grid Layout
Loading...
Cards in Grid Layout
Loading...

### Utility Classes

Bootstrap's utility classes provide quick ways to modify card appearance and behavior. Classes like `w-75` and `w-50` control width, while spacing utilities like `mb-3` manage margins and padding.

Cards with Utility Classes
Loading...
Cards with Utility Classes
Loading...

### Card Navigation

Enhance cards with navigation components to create tabbed interfaces. Choose between tabs or pills navigation styles to match your design preferences and user experience requirements.

Card with Navigation Tabs
Loading...
Card with Navigation Tabs
Loading...
Card with Navigation Pills
Loading...
Card with Navigation Pills
Loading...

### Text Alignment

Control text alignment within cards using Bootstrap's text alignment utilities. Classes like `text-start`, `text-center`, and `text-end` provide flexibility in how your content is positioned.

Text Alignment Examples
Loading...
Text Alignment Examples
Loading...

### Image Integration

Cards offer multiple ways to incorporate images into their design. From simple image placement to advanced overlay effects, you can create visually appealing content presentations that enhance user engagement.

### Image Caps

Image caps allow you to place images at the top or bottom of cards. Using `card-img-top` or `card-img-bottom` classes, you can create visually appealing cards with proper image positioning and responsive behavior.

Image Caps Examples
Loading...
Image Caps Examples
Loading...

### Image Overlays

Create cards with text overlaid on images using the `card-img-overlay` class. This technique is perfect for hero sections, featured content, or anywhere you want to combine text and imagery in an impactful way.

Image Overlay Example
Loading...
Image Overlay Example
Loading...

### Horizontal Cards

Create horizontal card layouts by combining Bootstrap's grid system with card components. This layout is particularly effective for content that benefits from a side-by-side arrangement of images and text.

Horizontal Card Layout
Loading...
Horizontal Card Layout
Loading...

### Card Styles

Customize cards using Bootstrap's extensive styling options. From background colors to borders and shadows, you can create cards that match your design system and enhance visual hierarchy.

### Background and Color

Use contextual background colors to convey meaning. The `text-bg-*` classes set both background and foreground colors, ensuring proper contrast and readability.

Background Color Examples
Loading...
Background Color Examples
Loading...

### Border Color

Add colored borders to cards using `border-*` utility classes. This subtle styling can help categorize content or draw attention to specific cards without using strong background colors.

Border Color Examples
Loading...
Border Color Examples
Loading...

### Card Layouts

Bootstrap provides several ways to arrange cards in your interface. From simple grids to card groups, you can create dynamic layouts that showcase your content effectively.

### Card Groups

Use `card-group` to render cards as a single, attached element with equal width and height. This layout is perfect for displaying related content in a unified way.

Card Group Example
Loading...
Card Group Example
Loading...

### Grid Cards

Combine Bootstrap's grid system with cards to create responsive, equal-height layouts. Use `row-cols-*` classes to determine how many cards appear per row at different breakpoints.

Grid Cards Example
Loading...
Grid Cards Example
Loading...
`ESC`

###### Quick Links

###### Dashboard

Analytics Overview

###### Profile

View your profile

###### Settings

Manage preferences

###### Help Center

Get support

###### Recent Searches

Analytics Dashboard User Settings Email Templates