Bootstrap Cards Tutorial With Examples

In this article, we’ll cover Bootstrap cards tutorial with examples, bootstrap cards examples, how to use them, and some common use cases.

Bootstrap cards are a flexible and customizable component that can be used to display content in a variety of ways on a website.

Cards are a popular design pattern in modern web design, and Bootstrap makes it easy to create them with its built-in classes and styles.

Let’s dive in!

What are Bootstrap Cards?

Bootstrap cards are a container element that can hold any type of content, including text, images, and buttons. Cards are a flexible and responsive component, making them ideal for displaying content on both desktop and mobile devices. Cards can be used to display information about products, services, team members, blog posts, and more.

How to Use Bootstrap Cards:

Bootstrap cards can be used in any HTML document by including the Bootstrap CSS and JavaScript files in your web page.

Here’s a basic example of a Bootstrap card:

In this example, we have a basic card with an image, title, text, and button.

Let’s take a closer look at each part of the card:

The card class is used to create a basic card container.
The card-img-top class is used to add an image to the top of the card.
The card-body class is used to add the content of the card, including the title, text, and button.
The card-title class is used to add the title of the card.
The card-text class is used to add the text content of the card.
The btn and btn-primary classes are used to create a button with the primary color scheme.

<div class="card">
  <img src="image.jpg" class="card-img-top" alt="...">
  <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>

Bootstrap Cards Use Cases:

Here are some common use cases for Bootstrap cards:

Product display: Use Bootstrap cards to display products on an e-commerce website. You can include an image of the product, the product name, description, and price.
Blog post display: Use Bootstrap cards to display blog posts on a website. You can include the blog post title, author name, date, and a brief excerpt.
Testimonials: Use Bootstrap cards to display customer testimonials on a website. You can include a photo of the customer, their name, and their testimonial.
Team members: Use Bootstrap cards to display information about team members on a website. You can include a photo of the team member, their name, position, and a brief bio.
Event display: Use Bootstrap cards to display information about events on a website. You can include the event title, date, time, location, and a brief description.

Practical Application Usage:

Let’s take a look at a practical example of how Bootstrap cards can be used in a real-world scenario.

Imagine you are building a website for a restaurant, and you want to display the menu items on the website.

You can use Bootstrap cards to display each menu item with an image, title, description, and price.

Here’s an example:

<div class="card">
  <img src="menu-item1.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Menu Item
    </h5>
    <p class="card-text">A delicious dish made with fresh ingredients and served with a side salad.</p>
    <p class="card-text">$14.99</p>
  </div>
</div>

You can repeat this code for each menu item, changing the image, title, description, and price as needed.

Examples of Bootstrap Cards

Now let’s do lots of use cases with examples of how we can use Bootstrap Cards.

Example #1 Horizontal card with image and text overlay

In this example, we have a card with an image and a text overlay that includes the card title, supporting text, and the last updated time.

<div class="card">
  <img src="image.jpg" class="card-img-top" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

Example #2 Card with a header and footer

In this example, we have a card with a header that says “Featured”, a body with a special title treatment, supporting text, a button, and a footer that includes the time the content was added.

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Example #3 Card with different button styles

In this example, we have a card with a title, text content, and three buttons with different styles: primary, secondary, and success.

<div class="card">
  <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">Primary Button</a>
    <a href="#" class="btn btn-secondary">Secondary Button</a>
    <a href="#" class="btn btn-success">Success Button</a>
  </div>
</div>

Example #4 Card with a custom background color

In this example, we have a card with a custom background color (blue) and white text. The card includes a title, text content, and a button with a light color scheme.

<div class="card bg-primary text-white">
  <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-light">Learn More</a>
  </div>
</div>

These examples demonstrate the versatility and flexibility of Bootstrap cards, and how they can be used to create a wide variety of layouts and designs.