Card Customization

🎴 Bootstrap Card Customization: Building Your Dream Cards!

Imagine you have a toy box where you keep different toys. Each toy box can look different - some are colorful, some are big, some are tiny. Bootstrap Cards work the same way! Let’s learn how to make your cards look exactly the way you want.

🎯 What We’ll Learn

Think of cards like picture frames you hang on a wall. We can:

• Put lists inside them (like a shopping list)
• Add clickable tabs (like folder tabs)
• Paint them different colors
• Make them bigger or smaller
• Line them up nicely
• Group them together

📋 Card List Groups

What Is It?

A list inside your card - like putting a checklist inside a picture frame!

Real Life Example

Your mom’s grocery list taped to the fridge door.

How It Works

<div class="card">
  <div class="card-header">
    My Favorite Foods
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">🍕 Pizza</li>
    <li class="list-group-item">🍔 Burger</li>
    <li class="list-group-item">🍦 Ice Cream</li>
  </ul>
</div>

Key Points

• Use list-group-flush to remove borders on sides
• Each item uses list-group-item
• The list fits perfectly inside the card

graph TD
    A["Card"] --> B["Card Header"]
    A --> C["List Group"]
    C --> D["Item 1"]
    C --> E["Item 2"]
    C --> F["Item 3"]

🧭 Card Navigation

What Is It?

Clickable tabs at the top of your card - like a notebook with different sections!

Real Life Example

A filing cabinet with labeled folders. Click a folder tab to see what’s inside.

Tabs Style

<div class="card">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">
          Home
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Photos</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    Content goes here!
  </div>
</div>

Pills Style

<div class="card-header">
  <ul class="nav nav-pills card-header-pills">
    <li class="nav-item">
      <a class="nav-link active" href="#">
        Active
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Other</a>
    </li>
  </ul>
</div>

Key Difference

🎨 Card Color Styling

What Is It?

Painting your cards with different colors - like coloring a coloring book!

Background Colors

<div class="card text-bg-primary">
  Blue card!
</div>

<div class="card text-bg-success">
  Green card!
</div>

<div class="card text-bg-danger">
  Red card!
</div>

Available Colors

Border Colors Only

<div class="card border-success">
  <div class="card-body text-success">
    Just a green border!
  </div>
</div>

graph TD
    A["Card Color Options"] --> B["Full Background"]
    A --> C["Border Only"]
    B --> D["text-bg-primary"]
    B --> E["text-bg-success"]
    C --> F["border-primary"]
    C --> G["border-success"]

📏 Card Sizing

What Is It?

Making cards bigger or smaller - like stretching or squishing play-dough!

Using Width Classes

<div class="card w-75">
  75% width card
</div>

<div class="card w-50">
  50% width card
</div>

<div class="card w-25">
  25% width card
</div>

Using Grid

<div class="row">
  <div class="col-6">
    <div class="card">
      Half the screen!
    </div>
  </div>
  <div class="col-6">
    <div class="card">
      Other half!
    </div>
  </div>
</div>

Custom Width with Style

<div class="card" style="width: 18rem;">
  Exactly 18rem wide
</div>

Quick Reference

⬅️➡️ Card Alignment

What Is It?

Putting cards on the left, middle, or right - like arranging photos on a shelf!

Text Alignment Inside Cards

<div class="card text-center">
  <div class="card-body">
    Centered text!
  </div>
</div>

<div class="card text-end">
  <div class="card-body">
    Right-aligned text!
  </div>
</div>

Centering the Whole Card

<div class="d-flex justify-content-center">
  <div class="card" style="width: 18rem;">
    I'm in the middle!
  </div>
</div>

Alignment Options

👨‍👩‍👧‍👦 Card Groups

What Is It?

Cards that stick together like best friends holding hands!

How It Works

<div class="card-group">
  <div class="card">
    <div class="card-body">
      Card 1
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      Card 2
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      Card 3
    </div>
  </div>
</div>

What Makes It Special

• Cards are same height automatically
• Cards touch each other (no gaps)
• Cards share borders

graph LR
    A["Card 1"] --- B["Card 2"]
    B --- C["Card 3"]

🔲 Card Grid

What Is It?

Cards arranged in rows and columns - like squares on a checkerboard!

Using Row Columns

<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card">Card 1</div>
  </div>
  <div class="col">
    <div class="card">Card 2</div>
  </div>
  <div class="col">
    <div class="card">Card 3</div>
  </div>
  <div class="col">
    <div class="card">Card 4</div>
  </div>
</div>

What Each Part Does

Equal Height Cards

<div class="row row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      I'm same height as others!
    </div>
  </div>
</div>

The magic class is h-100 - it makes all cards the same height!

graph TD
    A["Card Grid"] --> B["Row"]
    B --> C["Col + Card"]
    B --> D["Col + Card"]
    B --> E["Col + Card"]
    A --> F["Row"]
    F --> G["Col + Card"]
    F --> H["Col + Card"]
    F --> I["Col + Card"]

🎯 Quick Summary

🚀 You Did It!

Now you know how to customize Bootstrap cards like a pro! You can:

✅ Add lists inside cards ✅ Create tabbed navigation ✅ Color your cards any shade ✅ Size them perfectly ✅ Align text and cards ✅ Group cards together ✅ Build beautiful card grids

Go build something amazing! 🎉