Advertisement
Google Ad Slot: content-top
Bootstrap 5 Cards
In Bootstrap 5, Cards are a flexible and extensible content container used to display a wide range of content, including text, images, links, and more. Cards can be customized with different styles and features.
Basic Card:
The most simple card contains a title and some content.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard with Header and Footer:
You can add a header and footer to a card.
Card title
Some quick example text to build on the card title.
Card with List Group:
Cards can contain a list group of items.
Card with List Group
This is a card with a list group.
- Item 1
- Item 2
- Item 3
Card with Image Overlay:
You can add an overlay to a card image using the .card-img-overlay class.
Card Columns:
For creating a grid of cards that adapt to different screen sizes, use card columns.
Note: card-columns works like CSS masonry, so it will adapt depending on the available screen size.
Card title
This is some text within a card.
Card title
This is some text within a card.
Card title
This is some more text.
Card Decks:
To arrange multiple cards into a grid-like format, you can use .card-deck (in Bootstrap 4) or .row and .col (in Bootstrap 5).
Card title
Some quick example text to build on the card title.
Card title
Some quick example text to build on the card title.
Card title
Some quick example text to build on the card title.
Card title
Some quick example text to build on the card title.
Card title
Some quick example text to build on the card title.
Card title
Some quick example text to build on the card title.