Basic Card
Basic Card With Header & Footer
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another linkVideo Embed
Video Embed Card With Header & Footer
Carousel
Carousel Card With Header & Footer
Some quick example text to build on the card title and make up the bulk of the card's content.
Card link Another linkContent Types
Cards support a wide variety of content, including images, text, list groups, links, and more. Mix and match multiple content types to create the card you need.
List Group
Some quick example text to build on the card title and make up the bulk of the card's content.
- 4 Cras justo odio
- 2 Dapibus ac facilisis in
- 1 Morbi leo risus
- 3 Porta ac consectetur ac
- 8 Vestibulum at eros
Collapse
Some quick example text to build on the card title and make up the bulk of the card's content.
Contact Form
Support card subtitle
Text Alignment
You can quickly change the text alignment of any card—in its entirety or specific parts—with our text align classes.
Text Align Left
Jelly beans sugar plum cheesecake cookie oat cake soufflé.Tootsie roll bonbon liquorice tiramisu pie powder.Donut sweet roll marzipan pastry cookie cake tootsie roll oat cake cookie.
Sweet roll marzipan pastry halvah. Cake bear claw sweet. Tootsie roll pie marshmallow lollipop chupa chups donut fruitcake cake.Jelly beans sugar plum cheesecake cookie oat cake soufflé. Tart lollipop carrot cake sugar plum. Marshmallow wafer tiramisu jelly beans.
Go somewhereText Align Center
Jelly beans sugar plum cheesecake cookie oat cake soufflé.Tootsie roll bonbon liquorice tiramisu pie powder.Donut sweet roll marzipan pastry cookie cake tootsie roll oat cake cookie.
Sweet roll marzipan pastry halvah. Cake bear claw sweet. Tootsie roll pie marshmallow lollipop chupa chups donut fruitcake cake.Jelly beans sugar plum cheesecake cookie oat cake soufflé. Tart lollipop carrot cake sugar plum. Marshmallow wafer tiramisu jelly beans.
Go somewhereText Align Right
Jelly beans sugar plum cheesecake cookie oat cake soufflé.Tootsie roll bonbon liquorice tiramisu pie powder.Donut sweet roll marzipan pastry cookie cake tootsie roll oat cake cookie.
Sweet roll marzipan pastry halvah. Cake bear claw sweet. Tootsie roll pie marshmallow lollipop chupa chups donut fruitcake cake.Jelly beans sugar plum cheesecake cookie oat cake soufflé. Tart lollipop carrot cake sugar plum. Marshmallow wafer tiramisu jelly beans.
Go somewhereGroups
Use card groups to render cards as a single, attached element with equal width and height columns. By default, card groups
use
display: table; and
table-layout: fixed; to achieve their uniform sizing. However, enabling flexbox mode can switch that to use
display: flex; and provide the same effect.
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Decks
Need a set of equal width and height cards that aren’t attached to one another? Use card decks. By default, card decks
require a wrapping element:
.card-deck. We use table styles for the sizing and the gutters on
.card-deck.
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Columns
Cards can be organized into Masonry-like columns with just CSS by wrapping them in
.card-columns. Only applies to small devices and above.
Heads up! This is not available in IE9 and below as they have no support for the column-* CSS properties.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere
Brand Minute
Donut toffee candy brownie soufflé macaroon.
Storage Device
945 items
Ceramic Bottle
456 items
Bottom Image Cap
Jelly-o sesame snaps cheesecake topping. Cupcake fruitcake macaroon donut pastry gummies tiramisu chocolate bar muffin. Dessert bonbon caramels brownie chocolate bar chocolate tart dragée.
Cupcake fruitcake macaroon donut pastry gummies tiramisu chocolate bar muffin.
Last updated 3 mins ago
New Arrival
Donut toffee candy brownie soufflé macaroon.
Card Background Variants
Cards include their own variant classes for quickly changing the
background-color and
border-color of a card.
Darker colors require the use of
.text-white.
Info Background
Use
bg-info class
Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie.
Danger Background
Use
bg-danger class
Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie.
Horizontal Gradient
Use
.bg-gradient-x-* class
Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie.
Vertical Gradient
Use
.bg-gradient-y-* class
Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie.
Card Border Variants
Cards include their own variant classes for quickly changing the
border-color of a card. Use
.bg-transparent to remove background color.
Info Border
Use
border-info class
Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie.
Danger Border
Use
border-danger bg-transparent classes
Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie.
Primary Border
Use
border-primary class
Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie.
Warning Border
Use
border-warning bg-transparent class
Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie.
Card Headings
Content title
Add links in
.heading-element div. That will set links on right side of the header.
Caramels lemon drops tootsie roll toffee. Gummi bears macaroon fruitcake sesame snaps dessert sugar plum lollipop donut jelly-o. Croissant wafer bonbon sweet cake icing chocolate oat cake lemon drops.
Jelly beans sugar plum cheesecake cookie oat cake soufflé. Tart lollipop carrot cake sugar plum. Marshmallow wafer tiramisu jelly beans.
Content title
Jelly beans sugar plum cheesecake cookie oat cake soufflé.Tootsie roll bonbon liquorice tiramisu pie powder.Donut sweet roll marzipan pastry cookie cake tootsie roll oat cake cookie.
Sweet roll marzipan pastry halvah. Cake bear claw sweet. Tootsie roll pie marshmallow lollipop chupa chups donut fruitcake cake.Jelly beans sugar plum cheesecake cookie oat cake soufflé. Tart lollipop carrot cake sugar plum. Marshmallow wafer tiramisu jelly beans.
