Dashboard

Cards With Images

This is 3 column contents

Card title

This is a wider card with supporting text and below as a natural lead-in to the additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This is a wider card with supporting text and below as a natural lead-in to the additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This is a wider card with supporting text and below as a natural lead-in to the additional content. This content is a little bit longer.

Last updated 3 mins ago

Cards With Images

This is 3 column contents

Card title

This is a wider card with supporting text and below as a natural lead-in to the additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This is a wider card with supporting text and below as a natural lead-in to the additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This is a wider card with supporting text and below as a natural lead-in to the additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This is a wider card with supporting text and below as a natural lead-in to the additional content. This content is a little bit longer.

Last updated 3 mins ago

Cards With Footer and Links

This is 3 column contents

Card title

This is a wider card with supporting text and below as a natural lead-in to the additional content. This content is a little bit longer.

Card title

This is a wider card with supporting text and below as a natural lead-in to the additional content. This content is a little bit longer.

Card title

This is a wider card with supporting text and below as a natural lead-in to the additional content. This content is a little bit longer.

Card title

This is a wider card with supporting text and below as a natural lead-in to the additional content. This content is a little bit longer.

Cards With Header, Footer and Links

This is 3 column contents

Card title
Card subtitle

This is a wider card with supporting text and below as a natural lead-in to the additional content. This content is a little bit longer.

Card title
Card subtitle

This is a wider card with supporting text and below as a natural lead-in to the additional content. This content is a little bit longer.

Card title
Card subtitle

This is a wider card with supporting text and below as a natural lead-in to the additional content. This content is a little bit longer.

Card title
Card subtitle

This is a wider card with supporting text and below as a natural lead-in to the additional content. This content is a little bit longer.

Cards With Button

This is 3 column contents

Card title

This is a wider card with supporting text and below as a natural lead-in to the additional content. This content is a little bit longer.

Go somewhere
Card title

This is a wider card with supporting text and below as a natural lead-in to the additional content. This content is a little bit longer.

Go somewhere
Card title

This is a wider card with supporting text and below as a natural lead-in to the additional content. This content is a little bit longer.

Go somewhere
Card title

This is a wider card with supporting text and below as a natural lead-in to the additional content. This content is a little bit longer.

Go somewhere

Cards Types

The building block of a card is the .card-body. Use it whenever you need a padded section within a card.

Card title
Card subtitle

This is a wider card with supporting text and below as a natural lead-in to the additional content. This content is a little bit longer.

Last updated 3 mins ago

Card link
Card title

This is a wider card with supporting text and below as a natural lead-in to the additional content. This content is a little bit longer.

Featured
Special title treatment

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

Go somewhere

Header and footer

Add an optional header and/or footer within a card.

Card Header
Special title treatment

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

Go somewhere
Quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Card with alignment

You can quickly change the text alignment of any card—in its entirety or specific parts—with our text align classes

Special title treatment

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

Go somewhere
Special title treatment

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

Go somewhere
Special title treatment

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

Go somewhere

Card with Navigation

Add some navigation to a card’s header (or block) with Bootstrap’s nav components

Special title treatment

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

Go somewhere
Special title treatment

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

Go somewhere

Card with Image Top, Bottom and Overlay

Add some navigation to a card’s header (or block) with Bootstrap’s nav components

Card image cap
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 image cap
Card image
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 Styles with Background and color

Add some navigation to a card’s header (or block) with Bootstrap’s nav components

Header
Primary card title

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

Go somewhere
Header
Secondary card title

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

Go somewhere
Header
Success card title

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

Go somewhere
Header
Danger card title

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

Go somewhere
Header
Warning card title

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

Go somewhere
Header
Info card title

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

Go somewhere
Header
Light card title

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

Go somewhere
Header
Dark card title

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

Go somewhere

Card Styles with Border color

Add some navigation to a card’s header (or block) with Bootstrap’s nav components

Header
Primary card title

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

Go somewhere
Header
Secondary card title

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

Go somewhere
Header
Success card title

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

Go somewhere
Header
Danger card title

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

Go somewhere
Header
Warning card title

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

Go somewhere
Header
Info card title

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

Go somewhere
Header
Light card title

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

Go somewhere
Header
Dark card title

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

Go somewhere

Mixins utilities

You can also change the borders on the card header and footer as needed, and even remove their background-color with .bg-transparent.

Header
Success card title

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

Card Groups

You can also change the borders on the card header and footer as needed, and even remove their background-color with .bg-transparent.

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

When using card groups with footers, their content will automatically line up.

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

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

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

Card decks

Need a set of equal width and height cards that aren’t attached to one another? Use card decks.

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

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

Just like with card groups, card footers in decks will automatically line up.

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

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

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