Bootstrap Cards

Content 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.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

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 somewhere

Text 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 somewhere

Text 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 somewhere

Groups

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 image cap

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image cap

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image cap

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 image cap

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image cap

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image cap

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 image cap

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere
element 01

Brand Minute

Donut toffee candy brownie soufflé macaroon.

element 05

Storage Device

945 items

element 02

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

Card image cap
Card image

Inverse Text

Sugar plum tiramisu sweet. Cake jelly marshmallow cotton candy chupa chups carrot cake topping chupa chups.

Last updated 3 mins ago

Card image

Inverse Text

Sugar plum tiramisu sweet. Cake jelly marshmallow cotton candy chupa chups carrot cake topping chupa chups.

Last updated 3 mins ago

element 04

New Arrival

Donut toffee candy brownie soufflé macaroon.

Card image cap

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.

Multiple Thumbnail

avatar avatar avatar

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.

Navbar Color Options

Layout Options

Sidebar menu Background


Sidebar Background Image
background image
background image
background image
background image