Bootstrap card
Bootstrap 5 Bootstrap card component
Responsive Bootstrap card built with Bootstrap 5. Enhance your web design with flexible, user-friendly cards for displaying content beautifully and efficiently.
Basic
Use the following simple card component with a title and a description:
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Image
Use the following example of a card element with an image for blog posts, user cards, and many more:
Image with ripple
To add a ripple effect and subtle hover effect you need to modify the HTML markup of the card image.
Note: Some examples here have fixed card width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. To control the width of the card place it in the grid, use the sizing utilities, or set the width inline. You can learn more in the sizing section.