Bootstrap 5 introduces a versatile component called the card. A card is a flexible and extensible content container that includes options for a wide array of content, layouts, and actions. Cards can be used for displaying information, and they are well-suited for showcasing elements of varying sizes like images, lists, or other custom content.

Basic Structure of a Bootstrap Card

A typical card in Bootstrap 5 might look like this:

This code snippet creates a card with a fixed width of 18rem, an image at the top, a body with a title, text, and a link styled as a button.

Customizing Cards

Cards in Bootstrap 5 are highly customizable. You can add headers and footers, list groups, images, and use utility classes for text alignment and background colors. Cards can also be organized into card groups, decks, and columns for more complex layouts.

Adding Headers and Footers

Headers and footers can be added to cards using .card-header and .card-footer classes respectively. These can contain titles, text, or any other content that fits within the context of the card.

Using Images

Images can be placed at the top or bottom of a card using .card-img-top and .card-img-bottom. You can also create image overlays by using .card-img-overlay to place text on top of an image that covers the entire card.

Layout and Alignment

The layout of cards can be controlled using Bootstrap's grid system. Cards can be laid out in rows and columns, and you can use utility classes to control the width and alignment of cards within these layouts.

Background and Color

Background and color of cards can be modified using contextual classes like .bg-primary, .bg-success, .text-white, etc. This allows you to highlight cards in different colors based on the context they are used in.

Borders and Styles

Bootstrap 5 cards allow you to customize borders and card styles. You can change the border color using border utilities and even remove the background color for a transparent effect.

Example Usage

Cards can be used for a variety of purposes, from displaying user profiles to housing navigation elements, to serving as containers for articles and blog posts. Here's an example of a card used for a user profile:

This card includes an image of the user, a title with the user's name, a short bio, and a button to view the user's profile.

Conclusion

Bootstrap 5 cards are a powerful tool for web developers, offering a wide range of customization options and the ability to handle a variety of content types. Whether you're building a blog, a social media platform, or a business website, cards can help you organize your content in an attractive and user-friendly way. For more detailed information and examples, you can refer to the official Bootstrap documentation¹ or other resources like W3Schools² and MDBootstrap³.