Bootstrap 5 Cards
Flexible content containers with multiple variants
🃏 What are Bootstrap Cards?
Cards are flexible content containers with multiple variants and options. They can include headers, footers, images, and various content types. Cards replace older components like panels, wells, and thumbnails in modern Bootstrap design.
<!-- Basic Card -->
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Card content goes here.</p>
</div>
</div>
Output:
Card Title
Card content goes here.
Cards with Images
Cards with Images use .card-img-top or .card-img-bottom to place images within card components responsively. Images automatically scale to fit the card’s width while maintaining aspect ratio, creating visually engaging content displays for blogs, portfolios, product listings, or dashboards. This layout improves content hierarchy, boosts engagement, and supports responsive design—images adapt seamlessly across breakpoints. Using proper alt text and lazy loading techniques further enhances performance and SEO, making image cards a versatile solution for content-rich, visually-driven interfaces.
<div class="card" style="width: 18rem;">
<img src="image.jpg" class="card-img-top" alt="Card image">
<div class="card-body">
<h5 class="card-title">Card with Image</h5>
<p class="card-text">Some quick example text.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>Output:
🔹 Card Headers and Footers
Card Headers and Footers create distinct sections within cards using .card-header and .card-footer classes. Headers typically contain titles, tabs, or navigation, while footers hold actions, metadata, or additional links. This structural separation improves content organization, visual hierarchy, and scannability—especially in dashboards, admin panels, or content feeds. Headers and footers can be styled independently with background colors, borders, and padding utilities, making cards more modular and reusable across different contexts and content types.
<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>Output:
🔹 Colored Cards
Colored Cards apply background and text color utilities (.bg-* and .text-*) to style cards for visual categorization or emphasis. They are effective in dashboards for status indicators, in pricing tables for tier differentiation, or in UI components to highlight important information. Always ensure sufficient contrast between text and background for accessibility. Colored cards can be combined with borders, shadows, and hover effects to create interactive, visually distinct content containers that enhance both aesthetics and usability.
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Success card</h5>
<p class="card-text">Some quick example text.</p>
</div>
</div>Output:
Primary card
Some quick example text.
Success card
Some quick example text.
🔹 Card Groups
Card Groups (.card-group) display multiple cards as a single attached element with equal width and height. Cards within a group are connected without gaps, creating a unified, grid-like layout ideal for feature comparisons, pricing tables, or product displays. This component ensures consistent card alignment and spacing, improves visual cohesion, and supports responsive behavior—cards stack vertically on smaller screens. Card groups enhance content relationships and provide a structured, aesthetically pleasing way to present related items side-by-side.
<div class="card-group">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">This is card one.</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 2</h5>
<p class="card-text">This is card two.</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 3</h5>
<p class="card-text">This is card three.</p>
</div>
</div>
</div>Output:
Card 1
This is card one.
Card 2
This is card two.
Card 3
This is card three.
🔹 Horizontal Cards
Horizontal Cards use grid classes (.row and .col) inside cards to position images and content side-by-side. This layout optimizes space in list views, search results, profiles, or news feeds—where both visual and textual information are important. Horizontal cards improve content density and readability on larger screens while remaining responsive; they typically stack vertically on mobile. This pattern is widely used in blogs, e-commerce, and social media interfaces to create engaging, space-efficient content previews.
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<div style="width: 100%; height: 100%; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);"></div>
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Horizontal Card</h5>
<p class="card-text">This is a horizontal card layout.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>Output:
Horizontal Card
This is a horizontal card layout.
Last updated 3 mins ago