Bootstrap Card Examples: Build Responsive Cards

Updated 6 November 2026 · Standard formula, shown below

Free Bootstrap card examples show you how to build responsive cards using the Bootstrap framework’s built-in grid system and utility classes. You enter your content and choose a card layout, and Bootstrap automatically adjusts the cards’ width, height, and arrangement to fit any screen size, from mobile phones to desktop monitors. The examples below cover the core card components, layout patterns, and customization techniques you need to create your own responsive card designs without writing custom CSS.

What Are Bootstrap Cards?

Bootstrap cards are flexible content containers introduced in Bootstrap 4 and continued in Bootstrap 5. They replace the older panels, wells, and thumbnails from Bootstrap 3. A card is built from a .card class wrapper that can contain optional sub-components like .card-header, .card-body, .card-footer, .card-img-top, and .card-title. The framework provides dozens of utility classes for spacing, colors, borders, and text alignment, so you can assemble a card entirely from predefined classes. Cards are designed to be responsive by default: they stretch to fill their parent container, and when placed inside a grid column, they automatically resize as the viewport changes.

How Responsive Cards Work

Responsive behavior in Bootstrap cards comes from two main mechanisms: the grid system and flexbox utilities. The grid system uses a 12-column layout with breakpoints at 576px, 768px, 992px, 1200px, and 1400px (in Bootstrap 5). You control how many columns a card occupies at each breakpoint by using classes like col-md-6 (half width on medium screens and up) or col-lg-4 (one-third width on large screens). When cards are placed in a row, they flow left to right and wrap to the next line when they exceed the row width. The flexbox utilities like d-flex, align-items-stretch, and h-100 let you make cards in the same row equal height, even when their content lengths differ.

Here is a minimal example of a responsive card group using the grid:

<div class="row">
  <div class="col-sm-6 col-lg-4">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Card 1</h5>
        <p class="card-text">Some content.</p>
      </div>
    </div>
  </div>
  <!-- repeat for more cards -->
</div>

On extra-small screens (under 576px), each card takes the full row width. From 576px up, two cards fit per row. From 992px up, three cards fit per row. This is the core pattern behind every responsive card layout.

Card Components and Layout Options

Bootstrap cards are modular. You can mix and match the following components:

.card-header – optional top section, often used for titles or tabs.
.card-body – the main content area, required for most content.
.card-title and .card-subtitle – for headings inside the body.
.card-text – for paragraph text, with margin-bottom already set.
.card-link – for links placed together, with automatic spacing.
.card-img-top or .card-img-bottom – images that sit flush with the card edges.
.card-footer – optional bottom section for actions or meta info.
.list-group list-group-flush – to place a list inside a card.

You can also use layout utilities to create different arrangements:

Card groups (.card-group) – cards displayed side by side, equal height and width, with borders merged.
Card decks (.card-deck) – similar to groups but with gutters between cards (deprecated in Bootstrap 5, use grid instead).
Card columns (.card-columns) – a masonry-like layout that uses CSS columns (deprecated in Bootstrap 5; use a JavaScript library like Masonry for that effect).

For Bootstrap 5, the recommended approach for equal-height cards is to use the grid with h-100 on each card. For example: <div class="col-md-4"><div class="card h-100">...</div></div>. This ensures all cards in a row stretch to the same height.

How to Choose the Right Card Layout

Choosing between a grid, card group, or card deck depends on your content and design goals:

Grid with columns – best for most cases. It gives you fine control over how many cards appear per row at each breakpoint. Use col-sm-6, col-md-4, etc., to set the number of columns.
Card group – use when you want all cards to be exactly the same width and height, with no gap between them. This works well for a single row of cards with similar content.
Card deck – use in Bootstrap 4 if you want equal height but with a gutter. In Bootstrap 5, replace it with a grid and g-3 (gutter) classes.
Card columns – use only if you need a Pinterest-style masonry layout and are using Bootstrap 4. For Bootstrap 5, you need a third-party library or a custom CSS multi-column layout.

Also consider the content length. If cards have very different amounts of text, a grid with h-100 will keep them equal height, but the shorter cards will have empty space. If that looks awkward, consider using a card group or a different layout like a horizontal card where the image is on the side.

Common Problems and How to Fix Them

New users often run into a few recurring issues:

Cards not stacking on mobile – Ensure you have included the viewport meta tag: <meta name="viewport" content="width=device-width, initial-scale=1">. Without it, the page renders at desktop width on phones.
Images overflowing the card – Add img-fluid to images, or use card-img-top which already sets width: 100%. If an image has a fixed width, it will break the layout.
Cards not equal height – Use h-100 on the card inside a grid column. Also make sure the parent row uses align-items-stretch (the default).
Too much or too little spacing – Use Bootstrap’s spacing utilities like mb-3 (margin-bottom), p-3 (padding), and g-3 on the row for gutters.
Cards not wrapping – Make sure you are using the correct column classes. If you use col-md-4 on all cards, they will wrap after three on medium screens. If you use col without a number, they will all stay on one line.
Bootstrap version confusion – Bootstrap 5 removed card-deck and card-columns. If you are following a tutorial for Bootstrap 4, adapt the classes to the grid system.

If a card still looks broken, inspect it in your browser’s developer tools. Check whether the card is inside a .row and a .container. A card placed directly in the body without a container will stretch to full width, which may not be what you want.

Customizing Cards with Utilities

Bootstrap’s utility classes let you change the appearance of cards without writing custom CSS. For example:

Background and text colors – Use bg-primary, text-white, bg-light, etc.
Borders – Use border-0 to remove borders, rounded for rounded corners, or shadow to add a box shadow.
Text alignment – Use text-center, text-right, etc.
Width – Use w-50 (50% width) or w-75 for a card that doesn’t take the full column width.
Hover effects – Combine with transition and shadow on hover using a small custom CSS snippet.

For a common hover lift effect, add a class like card-hover and define it in your own stylesheet:

.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

This is a small amount of custom CSS, but it’s optional. Most responsive behavior comes from Bootstrap’s grid and utilities alone.

Free Resources and Where to Find More Examples

You don’t need to start from scratch. The official Bootstrap documentation has a comprehensive page on cards with live examples you can copy. Many free and open-source UI kits, like Bootstrap’s own examples page, include card layouts. Sites like CodePen, CodeSandbox, and JSFiddle host thousands of user-submitted Bootstrap card examples. When using a free example, check the Bootstrap version it targets. A card built for Bootstrap 4 may not work without changes in Bootstrap 5, especially if it uses card-deck or card-columns. Also, ensure the example includes the Bootstrap CSS and JavaScript files (the latter only needed for interactive components like dropdowns or modals inside cards).

For production, you can use a CDN link to Bootstrap’s CSS, or download the files to host locally. The official CDN is a common choice because it’s fast and reliable. But for a production site, consider self-hosting or using a package manager like npm to have full control over the version.

Frequently Asked Questions

How do I make Bootstrap cards responsive on all devices?

Use the grid system with column classes like col-sm-6, col-md-4, and col-lg-3. These classes specify how many columns a card occupies at each breakpoint. For example, col-md-4 makes the card take one-third of the row on medium screens and up, and full width on smaller screens. Combine with h-100 to keep cards equal height.

What is the difference between card group, card deck, and card columns?

Card groups display cards side by side with equal height and no gap, with borders merged. Card decks (Bootstrap 4 only) are similar but with a gutter between cards. Card columns create a masonry-like layout using CSS columns, where cards stack vertically in columns. In Bootstrap 5, card decks and columns are removed; use the grid with gutter classes for decks, and a custom multi-column layout or a library for masonry.

Can I use Bootstrap cards without the grid?

Yes, a single card can be placed directly inside a container or any block element. It will take the full width of its parent. For multiple cards side by side, you need a flex container, which the grid provides. You can also use d-flex and flex-wrap on a div to arrange cards without the grid, but the grid gives you more control over responsive behavior.

How do I make a card image responsive?

Use the img-fluid class on any image, or use card-img-top which already sets the image to fill the card’s width. If you want the image to cover the entire card, use card-img (without -top or -bottom) and place it as the first child of the card. For a fixed height image with cover behavior, you need custom CSS like object-fit: cover; height: 200px;.

Why do my cards have different heights?

By default, cards in a grid row have the same height because the grid columns stretch to match the tallest column. However, if the card content is shorter, the card body may not fill the column. Add h-100 to the card element to force it to fill the column height. Also ensure the parent row doesn’t have align-items-start which would prevent stretching.

Are Bootstrap cards accessible?

Bootstrap cards are built with semantic HTML5 elements and ARIA attributes where needed. To improve accessibility, use proper heading levels for card titles (e.g., <h2> or <h3> based on the page structure), add alt text to images, and ensure color contrast meets WCAG guidelines. Cards themselves are not interactive elements, so if you make a card clickable, add a button or link inside it rather than wrapping the whole card in an <a> tag.

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.