What are key Components of a Bootstrap Card ?
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.