A card is a box with optional image, header, body and footer.
.card,.card-body,.card-title,.card-text.card-img-top: an image at the top..card-header/.card-footer
Place cards in grid columns to make product or blog listings.
Bootstrap Cards
Flexible content containers.
✍️ 3 exercises + code challenge in this lessonKey Takeaways: Bootstrap Cards
Mastering Bootstrap Cards helps you write clean and reliable Bootstrap code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.
Bootstrap Cards Code Example
Bootstrap<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<div class="container py-3">
<div class="row g-3">
<div class="col-sm-6">
<div class="card h-100 shadow-sm">
<img src="https://picsum.photos/id/180/400/200" class="card-img-top" alt="Laptop">
<div class="card-body">
<h5 class="card-title">Web Development</h5>
<p class="card-text">Build fast, responsive websites.</p>
<a href="#" class="btn btn-primary">Learn more</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card h-100">
<div class="card-header">Featured</div>
<div class="card-body">
<h5 class="card-title">Python Course</h5>
<p class="card-text">From basics to automation.</p>
</div>
<div class="card-footer text-body-secondary">Starts next week</div>
</div>
</div>
</div>
</div>
Free sign-in required · Google login available
Bootstrap Cards Practice Exercises
Check what you learned in “Bootstrap Cards”.
/ 3 solved
Fill in the blank
The main content area of a card.
<div class="card"> <div class="">Text</div> </div>
✓ Correct!
Not quite. Try again.
Multiple choice
Which class puts an image at the top of a card?
✓ Correct!
Not quite. Try again.
Code challenge
Build a card with a card-body that contains an h5.card-title "Python".
Write the code in the live editor. Your answer is checked automatically.
✓ Solved
Free sign-in required · Google login available
to save your exercise progress.
Finished this lesson?
Mark it complete to track your progress.
Stuck on something?
Ask the community in the CodesInTech forum.
Need a developer?
Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.
Explore Our Services