Bootstrap 5 Cards 🎯

Welcome to our comprehensive guide on creating cards using Bootstrap 5! This tutorial is designed for both beginners and intermediates, so don't worry if you're new to Bootstrap or web development. By the end of this lesson, you'll be able to create beautiful, responsive cards that can be used in various projects. 💡 Pro Tip: Cards are a great way to present information in a structured and engaging manner!

What are Bootstrap 5 Cards?

In Bootstrap 5, a card is a block of content that can contain text, images, and other elements. It's a useful component for organizing and presenting data in a visually appealing way. Each card has a border, a title, a body, and optional footer. Cards are responsive, meaning they adjust their layout based on the screen size.

Getting Started 📝

To get started, make sure you have Bootstrap 5 installed in your project. If you haven't done so yet, you can find the installation guide here.

Creating a Basic Card 🎯

Let's create a simple card with a title, body, and footer.

html

<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Title</h5>
    <p class="card-text">This is a card's body.</p>
  </div>
  <div class="card-footer">Footer</div>
</div>

📝 Note: The card is created using the card class. The header, body, and footer are separate sections inside the card.

Customizing Cards 🎨

Bootstrap 5 offers various classes to customize the appearance of cards. Here's an example of a card with a custom color, border, and rounded corners.

html

<div class="card text-white bg-primary border-0 rounded-3">
  <div class="card-body">
    <h5 class="card-title">Custom Card</h5>
    <p class="card-text">This card has a custom color and style.</p>
  </div>
</div>

Images in Cards 📸

You can easily add images to your cards using the img-fluid class, which makes the image responsive.

html

<div class="card">
  <img src="image.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Image Card</h5>
    <p class="card-text">This card has an image at the top.</p>
  </div>
</div>

Columns and Rows 📝

Bootstrap 5's grid system allows you to create complex layouts with cards. Here's an example of a card in a row with two columns.

html

<div class="row">
  <div class="col">
    <div class="card">
      <!-- Card content -->
    </div>
  </div>
  <div class="col">
    <div class="card">
      <!-- Card content -->
    </div>
  </div>
</div>

Quiz 📝

By now, you should have a good understanding of creating and customizing cards in Bootstrap 5. Happy coding! 💡 Pro Tip: Don't forget to add the card-text class to your card's body for readable text.