YouTip

The Bootstrap 4 Card component is a flexible and powerful content container used to display various types of content, such as text, images, lists, and more. The card component is a very common UI element in Bootstrap 4, typically used to showcase information, blog posts, products, or social media posts. ### Basic Structure The card component is composed of several nested elements, primarily including the following parts: * **`.card`**: The outermost container for the card. * **`.card-body`**: A container for the card's content, usually used to hold text, titles, or other elements. * **`.card-title`**: The title of the card. * **`.card-text`**: The text content of the card. * **`.card-img-top`** or **`.card-img-bottom`**: Used to display images, placed at the top or bottom of the card. Style Class Description: | Class Name | Description | Example Usage | | --- | --- | --- | | `.card` | The container class for the card, used to create the card's frame. | `` | | `.card-body` | The container for the card's content, used to wrap the main content section. | `` | | `.card-title` | The class for the card title, used to define the card's heading. | `

Card Title

` | | `.card-text` | The class for the card's body text, used to add text to 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 card's top. | `` | | `.card-img-bottom` | The class for an image at the bottom of the card, typically used to display an image at the card's bottom. | `` | | `.card-header` | The header of the card, used to place titles, labels, etc. | `` | | `.card-footer` | The footer of the card, typically used to place author, date, or copyright information. | `` | | `.card-link` | Used to create links within the card, typically used in conjunction with other card content. | `Card link` | | `.card-deck` | Used to arrange cards horizontally, with automatic and even spacing between them. | `` | | `.card-columns` | Used to create a multi-column card layout, suitable for a magazine-style layout. | `` | | `.no-gutters` | Removes the column gutters from the grid system, used to remove the default spacing between cards. | `` | | `.card-group` | Groups cards together, and they will automatically adjust to the same height. | `` | | `.card-img-overlay` | Overlays a content layer on top of the card image, typically used to display text or other elements. | `` | | `.card-subtitle` | The card subtitle, used to display additional information below the title. | `

Card subtitle

` | ## Simple Card We can create a simple card using Bootstrap 4's .card and .card-body classes, as shown in the example below: !(#) ## Example [Try it »](#) > Bootstrap 4 cards are similar to panels, thumbnails, and wells in Bootstrap 3. * * * ## Header and Footer !(#) The .card-header class is used to create the header style for the card, and the .card-footer class is used to create the footer style: ## Example [Try it »](#) * * * ## Contextual Cards Bootstrap 4 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 »](#) * * * ## Titles, Text, and Links We can use the .card-title class on the header element to set the card's title. The .card-text class is used to set the card's body text. 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 »](#) * * * ## Horizontal Cards By combining the grid and utility classes, you can set cards to be arranged horizontally in a responsive way that adapts to mobile devices. In the following example, we use .no-gutters to remove grid gutters and .col-md-* classes to set the card to a horizontal layout at the md screen breakpoint. ## Example [Try it »](#) !(#)