#### Card with Image code icon

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

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

Go somewhere

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

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

Go somewhere

#### Content types

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

#### Special title treatment

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

#### Titles, text, and links

Card titles are used by adding `.card-title` & `.card-subtitle` for subtitle of card.

#### Card title

###### Card subtitle

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

Card link Another link

#### Header and footer

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

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.

Featured

#### Special title treatment

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

Go somewhere

#### Size Using grid markup

Using the grid, wrap cards in columns and rows as needed.`.col-1 to .col-12`

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

#### Text alignment

You can quickly change the text alignment`.text-center .text-right`.

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

#### Using utilities

Using the utility, you can give direct width class to card like`.w-25, w-50, w-75, w-100`

### This card has width of 75%

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

Go somewhere

### This card has width of 50%

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

Go somewhere

#### Size Using grid markup

Using the grid, wrap cards in columns and rows as needed.`.col-1 to .col-12`

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

Cards include various options for customizing their backgrounds, borders, and color.`.card-primary info, warning, danger`

#### Card Title

### Special title treatment

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

Go somewhere

#### Card Title

### Special title treatment

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

Go somewhere

#### Card Title

### Special title treatment

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

Go somewhere

#### Card Title

### Special title treatment

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

Go somewhere

#### Card Title

### Special title treatment

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

Go somewhere

#### Card Title

### Special title treatment

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

Go somewhere

#### Card styles

Cards include various options for customizing their backgrounds, borders, and color.`.card-primary info, warning, danger`

#### Card Title

### Special title treatment

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

Go somewhere

#### Card Title

### Special title treatment

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

Go somewhere

#### Card Title

### Special title treatment

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

Go somewhere

#### Card Title

### Special title treatment

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

Go somewhere

#### Card Title

### Special title treatment

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

Go somewhere

#### Card Title

### Special title treatment

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

Go somewhere

#### Card Groups

Use card groups to render cards as a single, attached element with equal width and height columns.

#### 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 card has supporting text below as a natural lead-in to additional content.

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 card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

#### Card With action

With action elements.

Title

#### Special title treatment

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

#### Card with Deck

Use card groups to render cards as a single, attached element with equal width and height columns.

#### 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 card has supporting text below as a natural.

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 card has even longer content than the first to show that equal height action. supporting text below as a natural lead-in to additional content

Last updated 3 mins ago

#### Card columns

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