## Cards

Proin placerat ante duiullam scelerisque a velit ac porta, fusce sit amet vestibulum mi. Morbi lobortis pulvinar quam.

## Overview

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

- Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.
- Additional card with action button like dropdown on right side.
- Card with tabs.
- Card with buttons on top header.

### Cards

Cards support a wide variety of content, including images, text, list groups, links, and more. Below are examples of what’s supported.

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

###### Card subtitle

Lorem ipsum dolor sit amet loreim nsectetur adipiscing elit. Fusce vel elementum eros.

Card link Another link

### Card title - Bottom Line

Vestibulumin augue posuere congue.

Peneit amet, porta semper nisi. Simple card title bottom line

### Card Small Descriptions

The generated Lorem Ipsum is therefore always free from repetition

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

### Card Images

Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.

### Card title

Vestibuluimis in faucibus orci luctus et ultrices posuere cubilia Curis ipsum in augue posuere congue.

Go somewhere

### Card title

Faucibus orci luctus et ultrices lorem posuere cubilia Cuquis ipsum in augue posuere congue.

Go somewhere

### Card title

###### Lorem ipusm dolro sit amet

Luctus et ultrices posuere cubilia Curae Integer quis ipsum in augue posuere congue.

Card link Another link

### Card title

###### Lorem ipusm dolro sit amet

Ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae Integer quis ipsum.

Card link Another link

### Card title

Faucibus orci luctus et ultrices posuere cubilia Curae Integer quis ipsum in augue posuere congue.

Last updated 3 mins ago

### Card title

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer quis ipsum in augue posuere congue.

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

Go somewhere

### Card Header and footer

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

Card Header

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

Go somewhere

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices ppsum in augue posuere congue.

Go somewhere
Card Header

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

Go somewhere
Quote

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

### Card Actions

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

#### Card Header

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

Go somewhere

#### Card Header

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

Go somewhere

#### Card Header

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

Go somewhere

#### Card Header

CSV PDF

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

Go somewhere

#### Card Header

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

### Card Footer LinkNew

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

Card Header

Vestibulum ante ipsum orci luctus et ultrices posuere cger quis ipsum in augue posuere congue.

Card Header

Faucibus orci luctus et ultrices posuere cubilia Curae Integer quis ipsum in augue posuere congue.

Card Header

Quisque faucibus, massa non consectetur lacininulla varius nisl, quis ornare diam nulla quis odio.

Etiam odio eraturabitur scelerisque leo at lectus mollis, ac dictum lectus fermentum. Donec vitae tellus sapieestas sit amet risus eu, interdum sodales metus.

Phasellus vulputate dui quam, a pretium lorem vestibulum nec. Cras risus nisi, sollicitudin eget dui eu, porta tinci consectetur, leo vel tincidunt imperdiet, nibh nisl consectetur titor purus dui vitae nibh. Donec ut rhoncus elit, eget aliquam enim.

Donec vitae tellus sapieniam odio erat egestas sit amet risus euCurabitur scelerisque leo at lectus mollisac dictum lectus fermentuminterdum sodales metus.

Cras risus nisi, sollicitudin eget dui eu, porta tincidunt sem. Donec consectetur, leo vel tincidunt imperdiet, nibh nisl consectetur orci, ut porttitor purus dui vitae nibh. Donec ut rhoncus elit, eget aliquam enim.

Curabitur scelerisque leo at lectus mollis, ac dictum lectus fermentum. Donec vitae tellus sapien. Etiam odio erat, egestas sit amet risus eu, interdum sodales metus.

Phasellus vulputate dui quam, a pretium lorem vestibulum nec. Cras risus nisi, sollicitudin eget dui eu, porta tincidunt sem. Donec consectetur, leo vel tincidunt imperdiet, nibh nisl consectetur orci, ut porttitor purus dui vitae nibh. Donec ut rhoncus elit, eget aliquam enim.

Curabitur scelerisque leo at lectus mollis, ac dictum lectus fermentum. Donec vitae tellus sapien. Etiam odio erat, egestas sit amet risus eu, interdum sodales metus.

Phasellus vulputate dui quam, a pretium lorem vestibulum nec. Cras risus nisi, sollicitudin eget dui eu, porta tincidunt sem. Donec consectetur, leo vel tincidunt imperdiet, nibh nisl consectetur orci, ut porttitor purus dui vitae nibh. Donec ut rhoncus elit, eget aliquam enim.

Etiam libero metus, dapibus vel sollicitudin vel, cursus sit amet urna. Nam imperdiet sem et purus varius aliquam.

Proin pulvinar diam tempor auctor egestas. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec consectetur, leo vel tincidunt imperdiet, nibh nisl consectetur orci, ut porttitor purus dui vitae nibh. Donec ut rhoncus elit, eget aliquam enim.

Donec vitae tellus sapietiam odio erat, egestas sit amet risus euabitur scelerisque leo at lectus mollis, ac dictum lectus fermentum. interdum sodales metus.

Cras risus nisi, sollicitudin eget dui eu porta tincidunt sem. Donec consectetur, leo vel tincidunt imperdiet, nibh nisl consectetur orci, ut porttitor purus dui vitae nibh. Donec ut rhoncus elit, eget aliquam enim.

### Card Masonary

Cards can be organized into Masonry-like columns with just CSS by wrapping them in card-columns.

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

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

Create lists of content in a card with a flush list group.

### Kitchen Sink

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

Card link Another link

### Kitchen Sink

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

Card link Another link

### 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
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros
- Cras justo odio
- Dapibus ac facilisis in
- Vestibulum at eros

### Card Variance

Easily display grids of images, videos, text, and more.

###### Simple figure

Give some text description

###### Hoverable figure

Give some text description

###### Clickable title

Hit the title to view details

###### Zoom action

Give some text description

Quick Action

###### Call action

Give some text description

Illustration
Quick Action

###### Figure tools

Give some text description

###### Figure description

Laboriosam neque officia adipisci quo ut placeat labore? Doloribus, ipsam? Voluptates, minus.

Gadget
Quick Action

- 2MB

###### Long title text can be place here

Laboriosam neque officia adipisci quo ut placeat labore? Doloribus, ipsam? Voluptates, minus.

Social
Quick Action

- Attachment.pdf

- Image attachment