Base
Standard
Build it with the class .card, and free to put the .card-block class on the .card element to consolidate your markup.
Image overlays
Turn an image into a card background and overlay your card’s text.
Depending on the image, you may or may not need .card-inverse (see below).
Inverted text
Add .card-inverse for white text and specify the background-color
and border-color to go with it.
Lorem ipsum dolor sit amet
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
ButtonContent & Image Caps
Cards support a wide variety of content, including images, text, list groups, links, and more.
Types
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
Image caps top
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.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis ullamco laboris nisi ut aliquip ex ea commodo consequat.
Last updated 3 mins ago
Image caps bottom
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.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis ullamco laboris nisi ut aliquip ex ea commodo consequat.
Last updated 3 mins ago
Extra
Header and footer
Add an optional header and/or footer within a card.
Lorem ipsum dolor sit amet
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Go somewhereLorem ipsum dolor sit amet
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Go somewhereText alignment
You can quickly change the text alignment of any card—in its entirety or specific parts—with our text align classes.
Lorem ipsum dolor sit amet
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Go somewhereLorem ipsum dolor sit amet
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Go somewhereLorem ipsum dolor sit amet
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Go somewhereVariants
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 .card-inverse.
Card title
Lorem ipsum Dolor dolor enim Ut consequat tempor quis minim enim sit ad in qui Ut in ut elit minim quis eiusmod reprehenderit aute cillum consequat enim Ut veniam labore dolor anim quis ullamco in cupidatat dolore ut amet elit sint magna exercitation aliquip.
Card title
Lorem ipsum Dolor dolor enim Ut consequat tempor quis minim enim sit ad in qui Ut in ut elit minim quis eiusmod reprehenderit aute cillum consequat enim Ut veniam labore dolor anim quis ullamco in cupidatat dolore ut amet elit sint magna exercitation aliquip.
Card title
Lorem ipsum Dolor dolor enim Ut consequat tempor quis minim enim sit ad in qui Ut in ut elit minim quis eiusmod reprehenderit aute cillum consequat enim Ut veniam labore dolor anim quis ullamco in cupidatat dolore ut amet elit sint magna exercitation aliquip.
Card title
Lorem ipsum Dolor dolor enim Ut consequat tempor quis minim enim sit ad in qui Ut in ut elit minim quis eiusmod reprehenderit aute cillum consequat enim Ut veniam labore dolor anim quis ullamco in cupidatat dolore ut amet elit sint magna exercitation aliquip.
Card title
Lorem ipsum Dolor dolor enim Ut consequat tempor quis minim enim sit ad in qui Ut in ut elit minim quis eiusmod reprehenderit aute cillum consequat enim Ut veniam labore dolor anim quis ullamco in cupidatat dolore ut amet elit sint magna exercitation aliquip.
Outline 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 .borderand.border-primary.
Card title
Lorem ipsum Dolor dolor enim Ut consequat tempor quis minim enim sit ad in qui Ut in ut elit minim quis eiusmod reprehenderit aute cillum consequat enim Ut veniam labore dolor anim quis ullamco in cupidatat dolore ut amet elit sint magna exercitation aliquip.
Card title
Lorem ipsum Dolor dolor enim Ut consequat tempor quis minim enim sit ad in qui Ut in ut elit minim quis eiusmod reprehenderit aute cillum consequat enim Ut veniam labore dolor anim quis ullamco in cupidatat dolore ut amet elit sint magna exercitation aliquip.
Card title
Lorem ipsum Dolor dolor enim Ut consequat tempor quis minim enim sit ad in qui Ut in ut elit minim quis eiusmod reprehenderit aute cillum consequat enim Ut veniam labore dolor anim quis ullamco in cupidatat dolore ut amet elit sint magna exercitation aliquip.
Card title
Lorem ipsum Dolor dolor enim Ut consequat tempor quis minim enim sit ad in qui Ut in ut elit minim quis eiusmod reprehenderit aute cillum consequat enim Ut veniam labore dolor anim quis ullamco in cupidatat dolore ut amet elit sint magna exercitation aliquip.
Card title
Lorem ipsum Dolor dolor enim Ut consequat tempor quis minim enim sit ad in qui Ut in ut elit minim quis eiusmod reprehenderit aute cillum consequat enim Ut veniam labore dolor anim quis ullamco in cupidatat dolore ut amet elit sint magna exercitation aliquip.
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.
ProTip! If you enable flexbox mode, you can remove the .card-deck-wrapper.
Card title
Excepteur sint occaecat cupidatat non laborum.
Last updated 3 mins ago
Card title
Excepteur sint occaecat cupidatat non laborum.
Last updated 3 mins ago
Card title
Excepteur sint occaecat cupidatat non laborum.
Last updated 3 mins ago
Card title
Excepteur sint occaecat cupidatat non laborum.
Last updated 3 mins ago
Groups
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
Excepteur sint occaecat cupidatat non laborum.
Last updated 3 mins ago
Card title
Excepteur sint occaecat cupidatat non laborum.
Last updated 3 mins ago
Card title
Excepteur sint occaecat cupidatat non laborum.
Last updated 3 mins ago
Card title
Excepteur sint occaecat cupidatat non laborum.
Last updated 3 mins ago
Columns
Cards can be organized into Masonry-like columns with just CSS by wrapping them in .card-columns. Heads up! This is not available in IE9 and below as they have no support for the column CSS properties.
Card title that wraps to a new line
This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
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
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
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.
Card title
This card has supporting text below as a natural lead-in to additional content.
Last updated 3 mins ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
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 to show that equal height action.
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