• +91-9142290450

  • Hajipur, Bihar, 844101

☰
❮
❯

BS4 Cards

← Previous Next →

Cards are flexible content containers in Bootstrap 4 that allow you to display text, images, links, and other elements in a structured and visually appealing way. They replace older components like panels, thumbnails, and wells, offering a modern approach to grouping content. Cards are versatile and can be used for blogs, product listings, user profiles, dashboards, and more. This tutorial will cover everything about BS4 cards, from basic structure to advanced customization.

What Are Cards?

A card is a container with padding, borders, and optional shadow, designed to hold content in a flexible format. Cards can include a variety of elements: titles, text, images, lists, links, buttons, footers, and even other components. They are fully responsive and can be combined with other Bootstrap utilities for custom layouts.

Basic Card

The simplest card contains a .card container and a .card-body to hold text content.

<div class="card">
  <div class="card-body">
    This is a basic card.
  </div>
</div>

This creates a box with subtle borders, padding, and a clean background.

Card Titles and Text

You can add headings and paragraphs inside the card body using .card-title and .card-text.

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Catherine's Card</h5>
    <p class="card-text">This is a descriptive text for Catherine's profile card.</p>
  </div>
</div>

Card titles and text help organize content for easy readability.

Card Images

Images can be added to the top, bottom, or background of a card using .card-img-top or .card-img-bottom.

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="https://via.placeholder.com/150" alt="Card image">
  <div class="card-body">
    <h5 class="card-title">Profile</h5>
    <p class="card-text">This card contains an image at the top.</p>
  </div>
</div>

Images enhance visual appeal and can provide context or identification for the card content.

Card Header and Footer

Cards can have headers and footers using .card-header and .card-footer. These are ideal for titles, dates, or action links.

<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Catherine's Card</h5>
    <p class="card-text">This card has a header and body content.</p>
  </div>
  <div class="card-footer text-muted">
    3 days ago
  </div>
</div>

Headers and footers provide additional structure and context for the card content.

Card Links

You can include links inside the card using .card-link for navigation or actions.

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Catherine's Card</h5>
    <p class="card-text">This card has links for actions.</p>
    <a href="#" class="card-link">View Profile</a>
    <a href="#" class="card-link">Message</a>
  </div>
</div>

Card links can also be combined with buttons for better interaction.

Card Styles and Colors

Cards can be styled using background utilities like .bg-primary, .bg-success, .bg-light, and .bg-dark. Text color can be adjusted with .text-white, .text-dark, etc.

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Primary Card</h5>
    <p class="card-text">This card uses a primary background color.</p>
  </div>
</div>

Colorful cards can highlight important information or distinguish categories.

Card Groups

Cards can be grouped together to create uniform layouts using .card-group. All cards in a group share the same height.

<div class="card-group">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card 1</h5>
      <p class="card-text">Description 1</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card 2</h5>
      <p class="card-text">Description 2</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card 3</h5>
      <p class="card-text">Description 3</p>
    </div>
  </div>
</div>

Card groups are useful for displaying products, profiles, or related content side by side.

Card Decks

Card decks create equal-width cards that span the width of the container with equal spacing using .card-deck.

<div class="card-deck">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card A</h5>
      <p class="card-text">Description A</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card B</h5>
      <p class="card-text">Description B</p>
    </div>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card C</h5>
      <p class="card-text">Description C</p>
    </div>
  </div>
</div>

Card decks are ideal for responsive layouts that automatically adjust spacing.

Card Columns

Card columns use a Pinterest-style layout to stack cards of varying heights in a masonry-like grid using .card-columns.

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

This layout works well for blog posts, galleries, or dashboards.

Best Practices

  1. Keep card content concise and structured.

  2. Use images, headers, and footers to improve readability.

  3. Combine cards with groups, decks, or columns for consistent layouts.

  4. Use colors and contextual classes purposefully.

  5. Ensure accessibility by using proper semantic tags.

Practical Examples

  • Profile Card: Display user information with an image, title, and contact links.

  • Product Card: Showcase product images, descriptions, and prices.

  • Dashboard Card: Show statistics or progress with headers and footers.

  • Blog Card: Display post title, summary, author, and date.

  • Interactive Card: Combine buttons and links for user actions.

Summary of the Tutorial

Bootstrap 4 cards are a modern, flexible component for displaying structured content. They support text, images, links, headers, footers, and more. By using cards effectively, you can create visually appealing layouts for profiles, products, blogs, dashboards, and interactive content. Cards can be grouped, decked, or arranged in columns to build responsive, professional web pages.

Practice Questions

  1. Create a basic card with a card body containing text.

  2. Create a card with a title and descriptive text inside the card body.

  3. Create a card with an image on top using .card-img-top, a title, and a paragraph.

  4. Create a card with a header and footer using .card-header and .card-footer.

  5. Create a card with two links inside the body using .card-link.

  6. Create a card with a colored background using .bg-success and adjust text color with .text-white.

  7. Create a card group with three cards of equal height and width.

  8. Create a card deck with three cards, evenly spaced across the container.

  9. Create a card column layout with three cards of varying height for a Pinterest-style layout.

  10. Create a card with an image, title, text, and two action buttons for interaction.

← Previous Next →

Try a Short Quiz.

coding learning websites codepractice

No quizzes available.

Bootstrap 4

online coding class codepractice

Bootstrap Basics

Layout & Grid System

Content & Typography

Components

Forms

JavaScript Components

Utilities & Helpers

codepractice logo
Login
Go Back Top