What Is Bootstrap 5 Card Component?
The Bootstrap 5 card component is a flexible content container, created with the .card class, that can hold an image, header, body text, links, list groups and a footer in any combination. Cards are used for product listings, blog post previews, team profiles, pricing plans and feature grids, and because they are built with flexbox they fit neatly into Bootstrap's responsive grid.
What Is the Bootstrap 5 Card Component?
A card groups related information into one bordered, rounded box that users can scan as a unit. Bootstrap 5 provides a set of classes for its parts: .card-header and .card-footer for top and bottom bars, .card-body for padded content, .card-title, .card-subtitle and .card-text for text, .card-link for links, and .card-img-top, .card-img-bottom, or .card-img with .card-img-overlay, for images. A .list-group.list-group-flush can sit inside a card for lists of details. Cards have no fixed width and no outer margin: they fill the width of their parent, so their size is controlled by the grid columns or sizing utilities around them. Bootstrap 5 removed version 4's .card-deck and .card-columns; equal-width card layouts are now built with the grid, and masonry layouts need a small plugin or custom CSS.
How the Bootstrap 5 Card Component Works
The .card element is a flex container with flex-direction: column, a 1px border, a border radius and a background colour, all defined through CSS variables such as --bs-card-border-color, --bs-card-border-radius and --bs-card-spacer-y in Bootstrap 5.2 and later. Because it is a column flexbox, .card-body grows to fill the available space, which lets you push a footer or button to the bottom. A typical product card is a <div class="card h-100"> containing <img src="product.jpg" class="card-img-top" alt="..."> and a .card-body with an <h3 class="card-title">, a <p class="card-text"> and a button. To lay cards out, wrap each one in a .col inside a row such as .row.row-cols-1.row-cols-md-2.row-cols-lg-3.g-4, which shows one card per row on phones, two from 768px and three from 992px, with consistent gutters. Adding .h-100 to each card stretches it to the height of the tallest card in the row. For a horizontal layout, put a .row.g-0 inside the card with the image in .col-md-4 and the body in .col-md-8. .card-group joins cards edge to edge with equal heights. Colour variants use utilities such as .text-bg-primary or .border-success, and .stretched-link on a link inside the card makes the whole card clickable.
Best Practices for the Bootstrap 5 Card Component
Use .h-100 on cards in grid rows so they line up, and keep the amount of text in each card similar so the layout does not look ragged. Give every card image meaningful alt text (or alt="" if it is purely decorative), explicit width and height attributes to prevent layout shift, and loading="lazy" for cards below the fold. Keep image aspect ratios consistent, for example by wrapping them in a .ratio.ratio-16x9 container or using object-fit: cover, so that titles start at the same height. Choose the heading level for card titles from the page outline: a card grid under an <h2> section heading should use <h3> titles, styled with .card-title and a font size class if needed, rather than always using <h5> as Bootstrap's documentation examples do. If a whole card is a link, use one real link with .stretched-link instead of wrapping the entire card in an <a>, which creates long, confusing link text for screen reader users. Keep calls to action consistent across cards, and push them to the bottom by making the body a flex column (.card-body.d-flex.flex-column) and adding .mt-auto to the button. For a flatter look, combine .border-0 with .shadow-sm, and use the grid's gutter classes (.g-3, .g-4) rather than margins on the cards themselves.
Bootstrap 5 Card Component and Canvas Builder
Canvas Builder builds pages with Bootstrap 5 and the Canvas template, so product grids, blog previews, team sections and pricing plans in the generated output can be built from cards and grid classes that you can edit in the exported HTML. You can describe the layout you want, such as "three pricing cards with the middle one highlighted", and the free Bootstrap Card Generator on canvasbuilder.co builds the markup for a single card that you can paste into a page.
Start building freeFrequently asked questions
How do I make Bootstrap 5 cards the same height?
Place each card in a grid column and add .h-100 to every .card. The row's flexbox stretches the columns to the height of the tallest one, and .h-100 makes each card fill its column. To align buttons at the bottom as well, make .card-body a flex column and add .mt-auto to the button.
How do I display cards side by side in Bootstrap 5?
Wrap the cards in a .row and each card in a column, or use row column classes such as .row-cols-1.row-cols-md-3.g-4 with a .col around each card. This stacks the cards on small screens and shows three per row from the md breakpoint (768px). .card-group is an alternative that joins cards with no gaps.
What replaced card-deck in Bootstrap 5?
The grid system. Bootstrap 5 dropped .card-deck because row columns with gutters, for example .row.row-cols-md-3.g-4, do the same job with more control over responsiveness and spacing. Adding .h-100 to each card keeps their heights equal.
How do I make an entire Bootstrap card clickable?
Add a link inside the card, usually on the title or button, and give it the .stretched-link class. Its clickable area expands to cover the card, while screen readers still announce only the link's own text. Avoid placing other links or buttons inside a card that uses .stretched-link.