Cards
Bootstrap Cards are flexible and extensible content containers. They include options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. Cards are primarily used for displaying content composed of different elements with a consistent layout. They’re great for showcasing blog posts, product descriptions, user profiles, and much more.
Key Classes and Components of Bootstrap Cards
Here are some of the fundamental classes and components used in Bootstrap Cards:
- .card: The main container class for a card.
- .card-header: Defines the header of the card.
- .card-body: Encapsulates the content area of the card.
- .card-footer: Used for adding a footer to the card.
- .card-title: Specifies a title within the card body.
- .card-text: For text content within the card body.
- .card-img-top, .card-img-bottom: Places an image at the top or bottom of the card.
- .card-group, .card-deck: For grouping multiple cards together.4
Let’s explore examples for each key class associated with Bootstrap Cards, illustrating their usage and functionality.
Basic Card Structure
<div class=”card”>
<div class=”card-body”>
This is some text within a card body.
</div>
</div>
Explanation
– `.card` is the main container class for a Bootstrap card.
– `.card-body` is used to wrap the content inside the card.
Card with Header and Footer
<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”>
2 days ago
</div>
</div>
Explanation
– `.card-header` and `.card-footer` are used to add a header and footer to the card.
– `.card-title` is used for the title inside the card body.
Card with Image
<div class=”card” style=”width: 18rem;”>
<img src=”image.jpg” class=”card-img-top” alt=”Card image cap”>
<div class=”card-body”>
<p class=”card-text”>Some quick example text to build on the card and make up the bulk of the card’s content.</p>
</div>
</div>
Explanation
– `.card-img-top` is used to place an image at the top of the card.
Card Group
<div class=”card-group”>
<div class=”card”>
<div class=”card-body”>
<h5 class=”card-title”>Card title</h5>
<p class=”card-text”>This card has supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
<div class=”card”>
<div class=”card-body”>
<h5 class=”card-title”>Card title</h5>
<p class=”card-text”>This card has supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
Explanation
– `.card-group` is used to group multiple cards together. Cards in a group use the same height and width.
Horizontal Card
<div class=”card mb-3″ style=”max-width: 540px;”>
<div class=”row no-gutters”>
<div class=”col-md-4″>
<img src=”image.jpg” class=”card-img” alt=”…”>
</div>
<div class=”col-md-8″>
<div class=”card-body”>
<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.</p>
</div>
</div>
</div>
</div>
Explanation
– This example shows a horizontal card layout. The `.row` and `.col-md-*` classes from Bootstrap’s grid system are used to create a card with side-by-side image and text.
When dealing with multiple cards and you want them to be responsive, wrapping flexibly in different rows based on the available screen size, you can use Bootstrap’s grid system in conjunction with the card components. Instead of using `.card-group`, which keeps cards in a single row with equal height and width, you should place each card inside a grid column. This allows for more responsive behavior, where the number of cards per row adjusts based on the screen size.
Example: Responsive Card Layout with Bootstrap Grid
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Responsive Card Layout</title>
<link href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<div class=”container”>
<div class=”row”>
<div class=”col-sm-12 col-md-6 col-lg-4″>
<div class=”card”>
<div class=”card-body”>
<h5 class=”card-title”>Card title</h5>
<p class=”card-text”>This card has supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class=”col-sm-12 col-md-6 col-lg-4″>
<div class=”card”>
<div class=”card-body”>
<h5 class=”card-title”>Card title</h5>
<p class=”card-text”>This card has supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<!– More cards can be added here –>
</div>
</div>
</body>
</html>
Explanation
– In this layout, each card is wrapped inside a column (`<div class=”col-sm-12 col-md-6 col-lg-4″>`).
– The grid classes `col-sm-12`, `col-md-6`, `col-lg-4` are used here. This means:
– On small devices (`sm`, screens <576px), each card takes full width (12 columns out of 12).
– On medium devices (`md`, screens ≥576px and <768px), each card takes half of the width (6 columns out of 12).
On large devices (`lg`, screens ≥768px), each card takes one-third of the width (4 columns out of 12).
– This responsive setup allows for flexible card layouts depending on screen size. On smaller screens, cards will stack vertically (one per row), while on larger screens, you can have multiple cards per row.
By using Bootstrap’s grid system, you can create responsive card layouts that adapt to different screen sizes, ensuring a consistent and user-friendly experience across all devices.
These examples cover a wide range of scenarios for using Bootstrap cards, demonstrating how the classes can be combined to create versatile, aesthetically pleasing content containers.
A Bootstrap card is a flexible and extensible content container with multiple options for headers, footers, content, colors, and much more. It can be used to create simple or complex card-based layouts. Bootstrap cards allow you to group various elements, such as images, links, text, and buttons, in a modular format.
Yes, the Iqra Technology page provides a free, step-by-step tutorial on Bootstrap Card.
Creating a Bootstrap card is easy! You simply use the .card class to structure your card container. Inside the card, you can include .card-header for the title, .card-body for the content, and .card-footer for additional information. Bootstrap’s grid system makes it simple to adjust the card’s width and layout.
To create a responsive card layout, you can utilize the Bootstrap 5 grid system. For example, you can set different card column widths depending on the screen size (like col-md-4 for medium screens, col-lg-3 for large screens, etc.). This ensures that the cards adjust to various screen sizes.
Yes, Bootstrap cards are versatile and can be used for a variety of content types, including images, text, lists, and buttons. Whether you’re designing a product listing, team member profiles, or blog excerpts, cards can neatly encapsulate your content.
You can make your Bootstrap cards interactive by adding links or buttons within the card. Use the .card-link or .card-btn classes to create clickable elements that lead to additional pages or actions. Additionally, you can add a hover effect to change the card’s appearance when the user hovers over it.
While both Bootstrap 4 and 5 offer similar card functionality, Bootstrap 5 has improved utilities and simplified the layout system. Some new features include expanded support for grid classes and enhanced customization options for spacing and alignment. Additionally, Bootstrap 5 removed jQuery, making cards lighter and faster.
.card: The outer container of the card..card-header: The top section, usually for the title or icon..card-body: The main content section of the card, where you add text, images, or other elements..card-footer: The bottom section, useful for additional information or actions like buttons or links.
Adding icons inside a Bootstrap card is straightforward. You can include icons in the card’s header or body using font libraries like Font Awesome or Bootstrap Icons. Simply add the <i> tag with the appropriate icon class inside your card.
