Bootstrap Cards are versatile UI components used for organizing and presenting content within a webpage. Comprising key elements such as a container, header, body, footer, and optional image, these cards provide a structured and visually appealing way to showcase information.

Card Container

The outermost container with the class card serves as the foundation for the card element.

<div class="card">
  <!-- Card content goes here -->
</div>

Card Header

The card-header class is used to define the header section of the card, typically containing a title or other relevant information.

<div class="card-header">
  <!-- Header content goes here -->
</div>

Card Body

The card-body the class encapsulates the main content of the card, housing text, images, or any other elements.

<div class="card-body">
  <!-- Main content goes here -->
</div>

Card Footer

The card-footer class represents the bottom section of the card, often utilized for additional information, buttons, or links.

<div class="card-footer">
  <!-- Footer content goes here -->
</div>

Card Image

The card-img-top class can be used to insert an image at the top of the card.

<img src="image.jpg" class="card-img-top" alt="Card Image">

Button in Card

Buttons can be added using the btn class and placing them inside the card structure.

<a href="#" class="btn btn-primary">Learn More</a>

Features

• You can nest cards within other cards for complex layouts.
• Cards can be combined with other Bootstrap components like buttons, forms, and modals for enhanced functionality.
• Bootstrap offers pre-built card variations like “alert” and “list group” for specific use cases.