YouTip

The Bootstrap 5 Card component is a powerful and flexible container used to display various types of content, such as text, images, lists, buttons, and more. The card component has been improved and enhanced in Bootstrap 5, offering more customization options and more flexible layout methods. Card components are very common in UI design, especially suitable for blogs, social media, dashboards, and other content display pages. Bas ### Basic Structure The Bootstrap 5 card component includes the following common elements: * **`.card`**: The outermost container of the card. * **`.card-body`**: The main content area of the card. * **`.card-title`**: The title section of the card. * **`.card-text`**: The text section of the card. * **`.card-img-top`** or **`.card-img-bottom`**: An image at the top or bottom of the card. Card Style Class Description: | Class Name | Description | Example Usage | | --- | --- | --- | | `.card` | The container class for the card, used to wrap the entire card. | `` | | `.card-body` | A container that holds the card's content, typically used for text, titles, etc. | `` | | `.card-title` | The card title class, usually containing the main title of the card. | `

Card Title

` | | `.card-text` | The card text class, usually containing the main body content of the card. | `

Some quick example text...

` | | `.card-img-top` | The class for an image at the top of the card, typically used to display an image at the top. | `` | | `.card-img-bottom` | The class for an image at the bottom of the card, typically used to display an image at the bottom. | `` | | `.card-header` | The header area of the card, used for placing titles or other content. | `` | | `.card-footer` | The footer area of the card, used for placing additional information or action buttons, etc. | `` | | `.card-link` | Used to create links within the card. | `Card link` | | `.card-deck` | Deprecated in Bootstrap 5, use `row` and `col` instead. | `` | | `.card-group` | Deprecated in Bootstrap 5, use `row` and `col` instead. | `` | | `.card-columns` | Uses a multi-column layout, with cards arranged in a masonry flow. | `` | | `.card-subtitle` | The subtitle of the card, usually displayed below the title. | `

Card subtitle

` | | `.card-img-overlay` | Overlays a content layer on the card image, often used to display text or other elements. | `` | ## Simple Card We can create a simple card using Bootstrap5's .card and .card-body classes. A card can include a header, content, footer, and various color settings. Example: !(#) ## Example [Try it »](#) * * * ## Header and Footer The .card-header class is used to create the header style of a card, and the .card-footer class is used to create the footer style of a card: !(#) ## Example [Try it »](#) * * * ## Contextual Cards Bootstrap 5 provides several background color classes for cards: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark, and .bg-light. !(#) ## Example [Try it »](#) * * * ## Title, Text, and Links We can use the .card-title class on the header element to set the card's title. The .card-body class is used to set the content of the card's body. The .card-text class is used to set the

tag within the .card-body class; if it's the last line, the bottom margin can be removed. The .card-link class is used to style links. ## Example

[Try it »](#) * * * ## Image Cards We can add .card-img-top (image above text) or .card-img-bottom (image below text) to the tag to create an image card: ## Example [Try it »](#) If you want the image to be a background, you can use the .card-img-overlay class: ## Example [Try it »](#)