Bootstrap 5 Cards & Layouts
Demonstration of Bootstrap 5's versatile card component and various layout patterns.
Basic Cards
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard with image
Some quick example text to build on the card title and make up the bulk of the card's content.
Learn morePrimary card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card Styles
Primary card title
Some quick example text with a border context color.
Secondary card title
Some quick example text with a border context color.
Success card title
Some quick example text with a border context color.
Danger card title
Some quick example text with a border context color.
Warning card title
Some quick example text with a border context color.
Info card title
Some quick example text with a border context color.
Card Groups
Use card groups to render cards as a single, attached element with equal width and height columns.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This card has supporting text below as a natural lead-in to additional content.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first.
Card Grid
Use the Bootstrap grid system with cards for a responsive layout with equal height cards.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Card title
This is a short card.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content.
Card title
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Horizontal Cards
Using the Bootstrap grid system, create horizontal card layouts.
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card title
This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Last updated 3 mins ago
Card Masonry
Using CSS Grid to create a masonry-like layout with Bootstrap 5.
Short Card
This is a short card.
Medium Card
This card has supporting text below as a natural lead-in to additional content.
It has a bit more content to demonstrate the masonry layout.
Another Short Card
Just a short card.
Longer Card
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
It has even more content to make it taller than the other cards.
And a third paragraph just to make sure it's really tall.
Medium Card
This card has supporting text below as a natural lead-in to additional content.
Short Card
This is a short card again.
Pricing Cards
Common layout for pricing tables using Bootstrap cards.
Free
$0/mo
- 10 users included
- 2 GB of storage
- Email support
- Help center access
Pro
$15/mo
- 20 users included
- 10 GB of storage
- Priority email support
- Help center access
Enterprise
$29/mo
- 30 users included
- 15 GB of storage
- Phone and email support
- Help center access