Cards

Examples

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

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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

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.

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.

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.

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.

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.