iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Bootstrap’s official 5.3 card documentation provides free examples for text-only, image-led, list-based, grid, and horizontal layouts. A card is a flexible content container; choose a pattern based on what the content needs, then use the grid and spacing utilities to fit it into your page. These examples are for Bootstrap 5.3. Check the current official documentation when starting a new project, since the available version may have changed.
What a Bootstrap card is—and when to use one
A card groups related content in a container that can include a padded body, title, subtitle, text, links, images, list groups, headers, or footers. The parts are optional: use only what helps readers understand or act on the content. A card is not a layout system by itself; its width and position usually come from its parent or the grid around it.
In Bootstrap 5.3, cards have no margin by default and fill the width of their parent. Add spacing utilities when cards need separation, and set a width, grid column, or custom CSS when the parent’s width is not suitable.
Start with a simple text card
Use .card as the container and .card-body for padded content. Add a heading with .card-title, supporting text with .card-text, and a link or button only when there is a real destination or action.
#1 Best Overall
<div class="card">
<div class="card-body">
<h2 class="card-title">Account settings</h2>
<p class="card-text">Update your profile and notification preferences.</p>
<a href="/account/settings" class="card-link">Open settings</a>
</div>
</div>Use a heading level that fits the page’s heading hierarchy rather than choosing a level just for its appearance. If the card is purely informational, omit the link or button instead of making the whole card look interactive.
Choose a card pattern that fits the content
| Pattern | Best fit | Implementation cue |
|---|---|---|
| Text-only | Short related information with an optional action | .card and .card-body, with title and text as needed |
| Image-led | Content where an image helps identify or explain the subject | Add .card-img-top and provide appropriate alternative text |
| List-based | A set of related items that reads naturally as a list | Use a flush list group within the card |
| Grid collection | Several cards that should reflow across screen sizes | Place cards in grid columns or use responsive .row-cols-* classes |
| Horizontal | A single card with image and text side by side at suitable widths | Combine .row g-0, image and content columns, and breakpoint-specific classes |
Image-led cards
Place an image at the top with .card-img-top. Write alternative text that conveys the image’s relevant information; if the image is decorative and adds no information beyond nearby text, use empty alternative text. Avoid using an image as the only way to communicate the card’s purpose.
List-based cards
When the content is genuinely a list—such as related resources or account options—a flush list group can sit within the card. Keep the list semantics and ensure linked items have meaningful link text; do not turn unrelated content into a list merely to use the component.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Build a responsive card collection
For multiple cards, the Bootstrap grid controls their available width and reflow. Use grid columns for more control over individual cards, or apply .row-cols-1 and larger-breakpoint variants to set the number of columns per row. The appropriate count depends on the parent width and how much text each card contains; a layout that fits short labels may crowd longer descriptions.
Rank #3
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
<div class="col">
<div class="card h-100">
<div class="card-body">
<h2 class="card-title">Guides</h2>
<p class="card-text">Browse practical how-to articles.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<div class="card-body">
<h2 class="card-title">Updates</h2>
<p class="card-text">See recent product and software news.</p>
</div>
</div>
</div>
</div>Here, the row begins with one column per row, then uses two at the medium breakpoint and three at the large breakpoint. The g-3 utility provides gutters between grid items, while h-100 makes cards fill their column height when card content differs. Adjust the breakpoints and spacing to suit the container and actual content, rather than assuming this arrangement fits every page.
Create a horizontal card
A horizontal card places image and content in columns within a row. Bootstrap’s documented pattern combines .row g-0, image and content columns, and breakpoint-specific column classes. The breakpoint matters: on narrower screens, stacking the content is often easier to read than forcing a side-by-side arrangement.
<div class="card">
<div class="row g-0">
<div class="col-md-4">
<img src="/images/guide.jpg" class="img-fluid rounded-start" alt="A person reading a guide on a tablet">
</div>
<div class="col-md-8">
<div class="card-body">
<h2 class="card-title">Getting started</h2>
<p class="card-text">Learn the essentials before configuring your workspace.</p>
<a href="/guides/getting-started" class="card-link">Read the guide</a>
</div>
</div>
</div>
</div>Replace the example image path and link with valid assets and destinations in your project. Choose alternative text based on what the image contributes, not just what it depicts.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minuteWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallUse color and alignment without losing meaning
Bootstrap supports text alignment, background, border, and contextual color patterns for cards. Use these treatments to establish visual hierarchy, not as the sole signal for a status or category. Bootstrap’s documentation warns that color indications are not conveyed to assistive technology users. Include an obvious text label or another cue, such as visually hidden text, whenever color carries meaning.
Check third-party examples before reuse
The official Bootstrap 5.3 documentation includes examples to adapt. Other sites may also advertise free card examples or tutorials, but an example being accessible without charge does not establish that every template, image, or other asset is licensed for reuse. Check the terms attached to third-party code and assets before incorporating them into a project.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
