Bootstrap Panels

17 April 2025 | Category: Bootstrap

Bootstrap Tutorial: Create Stylish Panels with Cards

By Grok | April 13, 2025

In this Bootstrap tutorial, you’ll learn how to create Panel-like content boxes using Bootstrap’s Card component, perfect for grouping content with headers, footers, and images. We’ll add vibrant images to make your panels pop.

What You’ll Learn

Creating a basic panel
Adding headers and footers
Using contextual colors
Combining panels with images

Prerequisites

Basic knowledge of HTML
A text editor (e.g., VS Code, Notepad)
A web browser (e.g., Chrome, Firefox)

Step 1: Understand Bootstrap Panels

In Bootstrap 3, Panels used the panel class to create bordered boxes with headers and footers. In Bootstrap 5, the card class replaces Panels, offering flexible, modern styling for grouped content.

Assume Bootstrap CSS is included in your project (we’ll skip the <link> tag as requested).

Step 2: Create a Basic Panel

Start with a simple Card to mimic a basic Panel. Use this code:

<div class="container">
    <h3>Basic Panel</h3>
    <div class="card">
        <div class="card-body">
            <h3 class="card-title">Welcome</h3>
            <p class="card-text">This is a simple content box.</p>
        </div>
    </div>
</div>

Explanation:

container: Centers and constrains content.
card: Creates the Panel-like box with a border.
card-body: Adds padding for content.
card-title, card-text: Style the heading and paragraph.

This creates a clean, bordered content box.

Step 3: Add Header and Footer

Mimic a Bootstrap 3 Panel with a header and footer using Card components. Try this:

<div class="container">
    <h3>Panel with Header and Footer</h3>
    <div class="card">
        <div class="card-header">Featured</div>
        <div class="card-body">
            <h3 class="card-title">Special Content</h3>
            <p class="card-text">This box has a header and footer.</p>
        </div>
        <div class="card-footer">Updated: April 2025</div>
    </div>
</div>

Explanation:

card-header: Styles the top section like a Panel heading.
card-footer: Styles the bottom section like a Panel footer.
card-body: Contains the main content.

This recreates the classic Panel structure.

Step 4: Use Contextual Colors

Apply Bootstrap’s contextual classes for colored Panels. Add this:

<div class="container">
    <h3>Colored Panel</h3>
    <div class="card border-success">
        <div class="card-header bg-success text-white">Success</div>
        <div class="card-body">
            <h3 class="card-title">Great Job</h3>
            <p class="card-text">Your task is complete!</p>
        </div>
    </div>
</div>

Explanation:

border-success: Adds a green border.
bg-success text-white on card-header: Makes the header green with white text.
card-body: Keeps the content neutral.

This creates a green-themed Panel for positive feedback.

Step 5: Combine with an Image

Pair a Card with a dummy image for a richer layout. Try this:

<div class="container">
    <div class="row">
        <div class="col-8">
            <h3>Project Panel</h3>
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title">Project Update</h3>
                    <p class="card-text">Progress is on track.</p>
                    <a href="#" class="btn btn-primary">View Details</a>
                </div>
            </div>
        </div>
        <div class="col-4">
            <img src="https://placehold.co/200x150/28a745/ffffff" class="img-fluid rounded" alt="Green placeholder">
        </div>
    </div>
</div>

Explanation:

row and col-8, col-4: Splits content into Card (8 units) and image (4 units).
card with card-body: Creates a Panel-like box with a button.
Uses a 200×150 green image for vibrancy.

The image enhances the Panel’s context.

Final Code

Here’s a combined example with varied Panels and an image:

<div class="container">
    <div class="row mb-3">
        <div class="col-12">
            <h3>Simple Panel</h3>
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title">Overview</h3>
                    <p class="card-text">A basic content box.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row mb-3">
        <div class="col-12">
            <h3>Colored Panel</h3>
            <div class="card border-primary">
                <div class="card-header bg-primary text-white">Info</div>
                <div class="card-body">
                    <h3 class="card-title">Latest News</h3>
                    <p class="card-text">Stay updated with our platform.</p>
                </div>
                <div class="card-footer">Posted: April 2025</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-7">
            <h3>Task Panel</h3>
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title">Task List</h3>
                    <p class="card-text">Complete your tasks today.</p>
                    <a href="#" class="btn btn-success">Start Now</a>
                </div>
            </div>
        </div>
        <div class="col-5">
            <img src="https://placehold.co/250x150/ff6b6b/ffffff" class="img-fluid rounded" alt="Red placeholder">
        </div>
    </div>
</div>

Output

Your webpage should show:

A simple Card with a title and text.
A blue-themed Card with a header, body, and footer.
A two-column section with a Card (title, text, green button) and a red image (250×150).
All Cards are responsive, adjusting for mobile, with colorful images for a vibrant look.

Next Steps

Check the Bootstrap Cards Docs for more options.
Try card-img-top to add images inside Cards.
Combine Cards with Bootstrap List Groups for richer layouts.

Conclusion

You’ve mastered creating Panel-like structures with Bootstrap Cards! With classes like card, card-header, and card-body, plus striking images, you’ve built stylish content boxes. Keep experimenting to enhance your webpages.