Concept 13: Bootstrap Cards
Bootstrap Card
:dart: Learning Objectives
By the end of this lesson, you will:
- Create basic Bootstrap cards with different content
- Build responsive card layouts using the grid system
- Manage card heights for consistent designs
- Customize cards with images, headers, and footers
- Apply colors and styling to make cards unique
:information_source: Bootstrap Card : A flexible content container that helps you organize information in a box-like format. Think of it as a digital index card that can hold text, images, buttons, and more!
:package: Basic Bootstrap Card
Let's start with the simplest card. A basic card contains:
- A container (
cardclass) - A body section (
card-bodyclass) - Your content (title, text, buttons)
Example:
HTML Input:
html
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Output:
:iphone: Card Layout and Responsiveness
Cards are smart! They adjust to fit different screen sizes. Here's how:
- Cards fill their parent's width - They stretch to fit their container
- Why no fixed width? - Different devices have different screen sizes
- Solution: Bootstrap Grid System - Helps cards look good on phones, tablets, and computers
- Example below - Shows three cards side by side, each taking equal space
:bulb: Tip Use Bootstrap's grid columns (
col-md-4) to create responsive layouts. The cards will stack vertically on small screens!
Example:
HTML Input:
html
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title 1</h5>
<p class="card-text">Some quick example text to build on the card title.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title 2</h5>
<p class="card-text">Some quick example text to build on the card title.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title 3</h5>
<p class="card-text">Some quick example text to build on the card title.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
Output:
:emoji: Card Height Management
Sometimes cards have different amounts of content. This creates uneven heights:
Multiple cards with different height
The Solution: h-100 Class
Add the h-100 class to make all cards the same height. This class tells cards to fill 100% of their parent's height.
:memo: Note
h-100= "height: 100%". It makes cards stretch to match the tallest card in the row!
Example:
HTML Input:
html
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">Card title 1</h5>
<p class="card-text">Short content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">Card title 2</h5>
<p class="card-text">Much longer content that spans multiple lines and makes this card taller than the others in the same row.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card h-100">
<div class="card-body">
<h5 class="card-title">Card title 3</h5>
<p class="card-text">Medium length content here.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
Output:
:emoji: Card Structure and Components
Cards are like building blocks. You can mix and match different parts to create the perfect card!
Required Parts (Must Have):
<div class="card">- The main container<div class="card-body">- Where your content goes
Optional Parts (Pick What You Need):
<img class="card-img-top">- Image at the top<div class="card-header">- Header section<div class="card-title">- Main heading<div class="card-subtitle">- Secondary heading<div class="card-text">- Paragraph text<div class="card-link">- Clickable links<div class="card-footer">- Footer section
Extra Components You Can Add:
- Buttons - For actions
- Progress bars - Show completion
- Badges - Display status or tags
:bulb: Tip You can use multiple titles, texts, or even multiple body sections in one card. Be creative!
:art: Card Customization Examples
Let's build a fancy card with many components! This example shows how to combine different parts:
Example:
HTML Input:
html
<div class="card" style="width: 20rem;">
<img src="https://picsum.photos/320/180?random=1" class="card-img-top" alt="Card image">
<div class="card-header">
Featured Product
</div>
<div class="card-body">
<h5 class="card-title">Premium Headphones</h5>
<h6 class="card-subtitle mb-2 text-muted">Wireless Audio</h6>
<p class="card-text">High-quality wireless headphones with noise cancellation and premium sound quality.</p>
<div class="progress mb-3">
<div class="progress-bar bg-success" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75% Battery</div>
</div>
<span class="badge badge-primary">Bluetooth</span>
<span class="badge badge-secondary">Noise Cancelling</span>
<div class="mt-3">
<a href="#" class="card-link">Product Details</a>
<a href="#" class="card-link">Reviews</a>
</div>
<button class="btn btn-success btn-block mt-2">Add to Cart - $199</button>
</div>
<div class="card-footer text-muted">
Free shipping available
</div>
</div>
Output:
:emoji: Card Color Customization
Make your cards colorful! Bootstrap provides classes to change:
- Text color - Make text stand out
- Background color - Fill the whole card
- Border color - Add colorful outlines
Check the Bootstrap Cheat Sheet for all color options!
Example One: Colored Background Card
Example:
HTML Input:
html
<!-- Card with blue background and white text -->
<div class="card text-white bg-primary" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Primary Card</h5>
<p class="card-text">This card has a blue background with white text.</p>
<a href="#" class="btn btn-light">Light Button</a>
</div>
</div>
Output:
Example 2: Colored Border Card
Example:
HTML Input:
html
<!-- Card with blue border and blue text -->
<div class="card border-primary" style="width: 18rem;">
<div class="card-body text-primary">
<h5 class="card-title">Primary Border Card</h5>
<p class="card-text">This card has a blue border and blue text in the body.</p>
<a href="#" class="btn btn-primary">Primary Button</a>
</div>
</div>
Output:
:memo: Summary
You've learned how to:
- Create basic Bootstrap cards with essential components
- Build responsive layouts using the grid system
- Manage card heights with the
h-100class - Customize cards with headers, footers, images, and more
- Apply colors to backgrounds, text, and borders
Cards are powerful tools for organizing content. They help make your websites look professional and organized!
:emoji: Video Tutorials
Bootstrap Cards Basics
Bootstrap Cards Customization
:emoji: AI Prompt Practice
Code with AI: Create different card layouts.
Try these prompts:
- "Bootstrap code for a card with an image, title, and text."
- "Bootstrap code for a progress bar that is 75% complete."
- "Create a Bootstrap card for a product with price and buy button"
- "Make a Bootstrap card for a blog post with author info"
:memo: Note Practice Tip: Start with a basic card, then add one new component at a time. This helps you understand how each part works!