Basic Examples

Cards require a small amount of markup and classes to provide you with as much control as possible. These classes and markup are flexible though and can typically be remixed and extended with ease. For example, if your card has no flush content like images, feel free to put the .card-body class on the .card element to consolidate your markup.

Card image cap

Card title

Icing powder caramels macaroon. Toffee sugar plum brownie pastry gummies jelly.

Go somewhere
Card image cap

Card title

Sweet halvah dragée jelly-o halvah carrot cake oat cake. Donut jujubes jelly chocolate cake marzipan chocolate chocolate bar.

Go somewhere

Card title

Support card subtitle
Card image cap

Bear claw sesame snaps gummies chocolate.

Card link Another link

Card title

Support card subtitle
Card image cap

Topping dessert marshmallow gummi bears chupa chups marzipan.

Card link Another link

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.

Card image cap

Basic

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

Go somewhere

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

Carousel

Support card subtitle

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

Collapse

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

Caramels dessert chocolate cake pastry jujubes bonbon. Jelly wafer jelly beans. Caramels chocolate cake liquorice cake wafer jelly beans croissant apple pie.

Video Embed

Support card subtitle

Candy cupcake sugar plum oat cake wafer marzipan jujubes lollipop macaroon. Cake dragée jujubes donut chocolate bar chocolate cake cupcake chocolate topping. Dessert jelly beans toffee muffin.

Card link Another link

Contact Form

Support card subtitle

Sizing

Constrain the width of cards via custom CSS, our predefined grid classes, or with custom styles using our grid mixins.

Project Info

With supporting text below as a natural lead-in to additional content.

Personal Info

Requirements

User Profile

With supporting text below as a natural lead-in to additional content.

About User

Contact Info & Bio

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

Gummi bears I love oat cake gingerbread donut cotton candy pie biscuit tart. Chocolate cake chocolate cake I love marzipan cookie macaroon. Tart I love I love carrot cake carrot cake chupa chups caramels. Carrot cake pastry cotton candy.

Dessert I love brownie biscuit topping I love chocolate cake gingerbread jelly beans. Chocolate cake cake cheesecake. Chocolate cake pastry macaroon.

Go somewhere

Text Align Center

Gummi bears I love oat cake gingerbread donut cotton candy pie biscuit tart. Chocolate cake chocolate cake I love marzipan cookie macaroon. Tart I love I love carrot cake carrot cake chupa chups caramels. Carrot cake pastry cotton candy.

Dessert I love brownie biscuit topping I love chocolate cake gingerbread jelly beans. Chocolate cake cake cheesecake. Chocolate cake pastry macaroon.

Go somewhere

Text Align Right

Gummi bears I love oat cake gingerbread donut cotton candy pie biscuit tart. Chocolate cake chocolate cake I love marzipan cookie macaroon. Tart I love I love carrot cake carrot cake chupa chups caramels. Carrot cake pastry cotton candy.

Dessert I love brownie biscuit topping I love chocolate cake gingerbread jelly beans. Chocolate cake cake cheesecake. Chocolate cake pastry macaroon.

Go somewhere

Image caps, overlays & Inverted text

Similar to headers and footers, cards include top and bottom image caps.

Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need .text-white

Card image cap

Top 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

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

Card Image Overlay

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

Last updated 3 mins ago

Card image

Card Image Overlay

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

Last updated 3 mins ago

Card image

Inverse Text

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

Last updated 3 mins ago

Card image

Inverse Text

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

Last updated 3 mins ago

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.

Cards include a class for quickly toggling the text color. By default, cards use dark text and assume a light background. Add .text-white for white text and specify the background-color and border-color to go with it.
You can also use .text-white with the contextual backgrounds variants.

element 01

Brand Minute

Donut toffee candy brownie soufflé macaroon.

element 02

Ceramic Bottle

456 items

element 03

Brand Minute

Donut toffee candy brownie soufflé macaroon.

element 04

New Arriaval

Donut toffee candy brownie soufflé macaroon.

element 05

Storage Device

945 items

element 06

New Arriaval

Donut toffee candy brownie soufflé macaroon.

Outline variants

In need of a colored card, but not the hefty background colors they bring? Replace the default modifier classes with the .border-* ones to style just the border-color of a card.

element 01

Brand Minute

Donut toffee candy brownie soufflé macaroon.

element 02

Ceramic Bottle

456 items

element 03

Brand Minute

Donut toffee candy brownie soufflé macaroon.

element 04

New Arriaval

Donut toffee candy brownie soufflé macaroon.

element 05

Storage Device

945 items

element 06

New Arriaval

Donut toffee candy brownie soufflé macaroon.

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

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 two wrapping elements: .card-deck-wrapper and a .card-deck. We use table styles for the sizing and the gutters on .card-deck. The .card-deck-wrapper is used to negative margin out the border-spacing on the .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

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 Arriaval

Donut toffee candy brownie soufflé macaroon.

Card image cap

Theme Customizer


Customize & Preview in Real Time

Menu Color Options

Layout Options

Navigation Color Options
Solid
Gradient

Solid

Gradient

Buy Now