Bootstrap cards are flexible content containers used to display information in a clean and organized way. Cards can contain text, images, titles, buttons, links, lists, headers, footers, and many other elements.
.card class.
Content can be placed inside .card-body, while
.card-header and .card-footer can be used for
additional sections.
A Bootstrap card is a flexible container used to present related information as a single visual unit.
<div class="card">
<div class="card-body">
This is a Bootstrap card.
</div>
</div>Cards are commonly used for products, courses, student profiles, dashboard statistics, blog posts, and services.
The .card class creates the outer container of a Bootstrap
card.
<div class="card">
Card content
</div>The card itself acts as the main wrapper for all card-related content.
The .card-body class provides the main content area of a
card.
<div class="card">
<div class="card-body">
<h5>Course Name</h5>
<p>Learn HTML and CSS.</p>
</div>
</div>Learn HTML and CSS.
Use .card-title for the main title of a card.
<div class="card">
<div class="card-body">
<h5 class="card-title">
Bootstrap Course
</h5>
</div>
</div>
The .card-text class can be used for text content inside
a card.
<p class="card-text">
Learn Bootstrap from beginner to advanced level.
</p>Learn Bootstrap from beginner to advanced level.
The .card-subtitle class can be used for secondary
information below a card title.
<h5 class="card-title">
Bootstrap
</h5>
<h6 class="card-subtitle mb-2 text-body-secondary">
Frontend Framework
</h6>
The .card-link class styles links inside a card.
<a href="#" class="card-link">
Read More
</a>
<a href="#" class="card-link">
View Course
</a>
The .card-header class creates a header section at the top
of a card.
<div class="card">
<div class="card-header">
Course Information
</div>
<div class="card-body">
Course content goes here.
</div>
</div>
The .card-footer class creates a footer section at the
bottom of a card.
<div class="card">
<div class="card-body">
Course content
</div>
<div class="card-footer">
Updated Today
</div>
</div>A card can have both a header and a footer.
<div class="card">
<div class="card-header">
Course
</div>
<div class="card-body">
Learn Bootstrap.
</div>
<div class="card-footer">
6 Months
</div>
</div>
Images can be placed at the top of a card using
.card-img-top.
<img src="image.jpg"
class="card-img-top"
alt="Course Image">Example structure:
<div class="card">
<img src="image.jpg"
class="card-img-top"
alt="Course Image">
<div class="card-body">
<h5 class="card-title">
Web Development
</h5>
</div>
</div>
An image can also be placed at the bottom of a card using
.card-img-bottom.
<div class="card">
<div class="card-body">
<h5 class="card-title">
Web Development
</h5>
</div>
<img src="image.jpg"
class="card-img-bottom"
alt="Course Image">
</div>This can be useful when the image should appear after the main content.
Buttons can be added to cards for actions such as View Details, Buy Now, Read More, or Enroll.
<div class="card">
<div class="card-body">
<h5 class="card-title">
Python Course
</h5>
<p class="card-text">
Learn Python programming.
</p>
<a href="#"
class="btn btn-primary">
Enroll Now
</a>
</div>
</div>Badges can be used inside cards to show status or category.
<h5 class="card-title">
Python Course
</h5>
<span class="badge text-bg-success">
Active
</span>A list group can be placed inside a card to display related items.
<div class="card">
<div class="card-header">
Course Topics
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
HTML
</li>
<li class="list-group-item">
CSS
</li>
<li class="list-group-item">
JavaScript
</li>
</ul>
</div>A card can contain a list group together with a footer.
<div class="card">
<div class="card-header">
Course
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
HTML
</li>
<li class="list-group-item">
CSS
</li>
</ul>
<div class="card-footer">
Beginner Level
</div>
</div>Bootstrap background utilities can be combined with cards.
<div class="card text-bg-primary">
<div class="card-body">
Primary Card
</div>
</div>
<div class="card text-bg-success">
<div class="card-body">
Success Card
</div>
</div>Bootstrap border utilities can be used to change the border color of a card.
<div class="card border-primary">
<div class="card-body">
Primary Border
</div>
</div>
The .card-group class can be used to join cards into a
single connected group.
<div class="card-group">
<div class="card">
<div class="card-body">
Card One
</div>
</div>
<div class="card">
<div class="card-body">
Card Two
</div>
</div>
</div>Cards can be placed inside Bootstrap's grid system to create responsive layouts.
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-body">
Card One
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
Card Two
</div>
</div>
</div>
</div>Bootstrap's grid and flex utilities can help create cards with equal height within a row.
<div class="row">
<div class="col-md-4 d-flex">
<div class="card w-100">
<div class="card-body">
Card content
</div>
</div>
</div>
</div>
Using d-flex on the column and w-100 on the
card can help the card fill the available column width.
Cards can also be arranged horizontally using Bootstrap's grid and flex utilities.
<div class="row g-0">
<div class="col-md-4">
<img src="image.jpg"
class="img-fluid"
alt="Course">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">
Web Development
</h5>
<p class="card-text">
Learn modern web development.
</p>
</div>
</div>
</div>This pattern is useful when an image and content need to appear beside each other on larger screens.
A card header can contain navigation or tabs.
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active"
href="#">
Overview
</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">
Details
</a>
</li>
</ul>
</div>Cards are commonly used to display products or services.
<div class="card">
<div class="card-body">
<h5 class="card-title">
Website Development
</h5>
<p class="card-text">
Professional website development service.
</p>
<h5>
₹10,500
</h5>
<a href="#"
class="btn btn-primary">
View Details
</a>
</div>
</div>Cards are ideal for displaying courses on an education website.
<div class="card">
<div class="card-body">
<span class="badge text-bg-success">
Popular
</span>
<h5 class="card-title mt-2">
Python Full Stack
</h5>
<p class="card-text">
Learn Python, SQL, Django and web development.
</p>
<a href="#"
class="btn btn-primary">
Enroll Now
</a>
</div>
</div>Cards can be used to display student profile information.
<div class="card">
<div class="card-body">
<h5 class="card-title">
Rahul Kumar
</h5>
<p class="card-text">
Student ID: ST101
</p>
<p class="card-text">
Course: ADCA
</p>
<span class="badge text-bg-success">
Active
</span>
</div>
</div>Student ID: ST101
Course: ADCA
ActiveCards should be structured so that their content remains understandable to all users.
Avoid these common mistakes when designing cards:
Cards work best when they group related information clearly.
Dashboard applications frequently use cards to display statistics.
<div class="row">
<div class="col-md-4">
<div class="card text-bg-primary">
<div class="card-body">
<h5>Total Students</h5>
<h2>250</h2>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card text-bg-success">
<div class="card-body">
<h5>Active Students</h5>
<h2>220</h2>
</div>
</div>
</div>
</div>The following example combines a card image, badge, title, text, button, and footer.
<div class="card" style="max-width:400px;">
<img src="course.jpg"
class="card-img-top"
alt="Course Image">
<div class="card-body">
<span class="badge text-bg-success">
Popular
</span>
<h5 class="card-title mt-2">
Web Development
</h5>
<p class="card-text">
Learn HTML, CSS, JavaScript and Bootstrap.
</p>
<a href="#"
class="btn btn-primary">
View Course
</a>
</div>
<div class="card-footer">
Updated Today
</div>
</div>.card to create a Bootstrap card..card-body for the main card content..card-title for card titles..card-text for card text..card-subtitle for secondary headings..card-link for links inside cards..card-header for the card header..card-footer for the card footer..card-img-top for an image at the top..card-img-bottom for an image at the bottom..card-group to group cards together.Question: Which Bootstrap class is used to create the main content area of a card?