Bootstrap 4 cards provide a flexible and extensible content container with multiple options for headers, footers, images, and text content.
Cards are widely used for displaying structured content in a stylish and responsive manner.
What This Tutorial Covers:
- Basic Bootstrap 4 card structure
- Adding headers and footers to cards
- Cards with images
- Cards with lists and links
- Card layout variations (grid, columns, deck, group)
- Card alignment and text customization
- Advanced card customization
1. Basic Bootstrap 4 Card
The .card class is used to create a card component.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 4 Cards</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is a basic card example.</p>
</div>
</div>
</div>
</body>
</html>
Explanation:
- .card creates the card container.
- .card-body is used to wrap the card’s content.
- .card-title adds a heading inside the card.
- .card-text is used for regular text content.
2. Card with Header and Footer
Headers and footers add structure to the card.
Example:
<div class="container mt-4">
<div class="card">
<div class="card-header">Card Header</div>
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Card with a header and footer.</p>
</div>
<div class="card-footer">Card Footer</div>
</div>
</div>
Explanation:
- .card-header creates a header section at the top.
- .card-footer adds a footer section at the bottom.
3. Card with Image
Cards can include images at the top or bottom.
Example:
<div class="container mt-4">
<div class="card">
<img src="https://via.placeholder.com/300x150" class="card-img-top" alt="Card Image">
<div class="card-body">
<h5 class="card-title">Card with Image</h5>
<p class="card-text">This card has an image on top.</p>
</div>
</div>
</div>
Explanation:
- .card-img-top places the image at the top of the card.
- The rest of the card remains the same.
To place the image at the bottom, use .card-img-bottom instead.
4. Cards with Lists and Links
Cards can contain lists and links.
Example:
<div class="container mt-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card with List</h5>
<p class="card-text">This card contains a list.</p>
<ul class="list-group list-group-flush">
<li class="list-group-item">Item 1</li>
<li class="list-group-item">Item 2</li>
<li class="list-group-item">Item 3</li>
</ul>
</div>
</div>
</div>
To add links inside a card, use .card-link.
<div class="card-body">
<h5 class="card-title">Card with Links</h5>
<p class="card-text">This card contains links.</p>
<a href="#" class="card-link">First Link</a>
<a href="#" class="card-link">Second Link</a>
</div>
5. Card Layout Variations
Card Grid (Row & Columns)
Cards can be placed in a grid layout using .row and .col.
<div class="container mt-4">
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Content for card 1.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 2</h5>
<p class="card-text">Content for card 2.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 3</h5>
<p class="card-text">Content for card 3.</p>
</div>
</div>
</div>
</div>
</div>
Card Deck (Equal Width)
Use .card-deck to create a group of cards with equal width.
<div class="container mt-4">
<div class="card-deck">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Equal width card.</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 2</h5>
<p class="card-text">Equal width card.</p>
</div>
</div>
</div>
</div>
Card Group (Tighter Layout)
Use .card-group to make the cards share borders.
<div class="container mt-4">
<div class="card-group">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Tighter layout.</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 2</h5>
<p class="card-text">Tighter layout.</p>
</div>
</div>
</div>
</div>
6. Card Alignment and Text Customization
Centering Text Inside a Card
<div class="container mt-4">
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Centered Text</h5>
<p class="card-text">This card's text is centered.</p>
</div>
</div>
</div>
Aligning Text to the Right
<div class="card text-right">
<div class="card-body">
<h5 class="card-title">Right-Aligned Text</h5>
<p class="card-text">This card's text is right-aligned.</p>
</div>
</div>
7. Advanced Card Customization
You can add custom styles to modify Bootstrap cards.
Example:
<style>
.custom-card {
background-color: #ffcc00;
color: black;
border: 2px solid #ff9900;
}
</style>
<div class="container mt-4">
<div class="card custom-card">
<div class="card-body">
<h5 class="card-title">Custom Styled Card</h5>
<p class="card-text">This card has a custom background and border.</p>
</div>
</div>
</div>
Conclusion
Bootstrap 4 cards can be used for a wide range of purposes. By using different layouts, text alignments, images, and links, you can create appealing content sections.
