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.
