### Card Options

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

#### Card Header Options

Card header options include basic card header, with controls, with inline and block sub titles.

#### Card Title

Basic card without any heading elements and border.

#### Card Header Controls

Basic card with heading elements.

#### Card Title with inline subtitle

Basic card with inline subtitle. Use `small` tag for subtitle.

#### Card Title with block subtitle

Basic card with block subtitle. Use `small` tag with `block` class for block subtitle.

#### Card Footer Options

Card footer options include basic card footer, without border, within card body and within card body without border.

#### Basic Footer

Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.

#### Footer Without Border

Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.

#### Footer Within Body

Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.

#### Footer Within Body Without Border

Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.

#### Card Title Sizing

You can use any heading tags like H1, H2, H3, H4, H5, H6 to display card title.

# H1 Title

Use `<h1 class="card-header ">H1 Title</h1>` for H1 title heading.

## H2 Title

Use `<h2 class="card-header ">H2 Title</h2>` for H2 title heading.

### H3 Title

Use `<h3 class="card-header ">H3 Title</h3>` for H3 title heading.

#### H4 Title

Use `<h4 class="card-header ">H4 Title</h4>` for H4 title heading.

##### H5 Title

Use `<h5 class="card-header ">H5 Title</h5>` for H5 title heading.

###### H6 Title

Use `<h6 class="card-header ">H6 Title</h6>` for H6 title heading.

#### Card 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`.

#### Primary Background

Use `bg-primary` class for primary background color.

#### Success Background

Use `bg-success` class for success background color.

#### Info Background

Use `bg-info` class for info background color.

#### Warning Background

Use `bg-warning` class for warning background color.

#### Danger Background

Use `bg-danger` class for danger background color.

#### Custom background

Use `bg-color` class for custom background color.

#### Card Background Gradient 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`.

#### Horizontal Gradient

Use `.bg-gradient-x-*` class for horizontal gradient.

Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.

#### Vertical Gradient

Use `.bg-gradient-y-*` class for vertical gradient.

Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.

#### Three Colors Horizontal Gradient

Use `.bg-gradient-x2-*` class for three colors horizontal gradient.

Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.

#### Three Colors Vertical Gradient

Use `.bg-gradient-y2-*` class for three colors vertical gradient.

Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.

#### Directional Gradient

Use `.bg-gradient-directional-*` class for directional gradient.

Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.

#### Radial Gradient

Use `.bg-gradient-radial-*` class for radial gradient.

Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.

#### Striped Gradient

Use `.bg-gradient-striped-*` class for striped gradient.

Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.

#### Custom background Gradient

This example uses the same vertical gradient class with custom color background.

Oat cake ice cream candy chocolate cake chocolate cake cotton candy dragée apple pie. Brownie carrot cake candy canes bonbon fruitcake topping halvah. Cake sweet roll cake cheesecake cookie chocolate cake liquorice. Apple pie sugar plum powder donut soufflé.

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

#### Primary Outline

Use `border-primary` class for primary outline color.

#### Success Outline

Use `border-success` class for success outline color.

#### Info Outline

Use `border-info` class for info outline color.

#### Warning Outline

Use `border-warning` class for warning outline color.

#### Danger Outline

Use `border-danger` class for danger outline color.

#### Custom Outline

Use `border-*` class for custom outline color.

#### Card Heading Colors

In need of a colored heading card, but not the hefty background color cards? Use `.bg-*` class with `.card-header` along with `.card-head-inverse` to make title text readable.

#### Primary Card Heading

Use `bg-primary` class with card-head for primary card heading color.

#### Success Card Heading

Use `bg-success` class with card-head for success card heading color.

#### Info Card Heading

Use `bg-info` class with card-head for info card heading color.

#### Warning Card Heading

Use `bg-warning` class with card-head for warning card heading color.

#### Danger Card Heading

Use `bg-danger` class with card-head for danger card heading color.

#### Custom Card Heading

Use `bg-*` class with card-head for custom card heading color.

#### Bordered Cards

In need of a colored bordered card? Use `.border-*` class with `.card`.

#### Primary Bordered Card

Use `border-primary` class for primary border color.

#### Success Bordered Card

Use `border-success` class for success border color.

#### Info Bordered Card

Use `border-info` class for info border color.

#### Warning Bordered Card

Use `border-warning` class for warning border color.

#### Danger Bordered Card

Use `border-danger` class for danger border color.

#### Custom Bordered Card

Use `border-*` class for custom border color.

#### Card Borders

In need of a single or multiple colored bordered card? Use `.border-top-*`, `.border-right-*`, `.border-bottom-*`,`.border-left-*` class with `.card`.

#### Border Top

Use `border-top-*` class for border top color.

#### Border Right

Use `border-right-*` class for border right color.

#### Border Bottom

Use `border-bottom-*` class for border bottom color.

#### Border Left

Use `border-left-*` class for border left color.

#### Border Top & Bottom

Use `border-top-*` and `border-bottom-*` class for border top and bottom color.

#### Border Left & Right

Use `border-left-*` and `border-right-*` class for border left and right color.

#### Card Border Sizing

Want to chage border size of card? Use `.border-top-2`, `.border-right-2`, `.border-bottom-2`,`.border-left-2` class with `.card`.

#### Border Normal Size

Use `border-top-*` class for border top color.

#### Border Normal Size

Use `border-right-*` class for border right color.

#### Border Large Size

Use `border-bottom-*` class for border bottom color.

#### Border Large Size

Use `border-left-*` class for border left color.

#### Border Extra Large Size

Use `border-top-*` and `border-bottom-*` class for border top and bottom color.

#### Border Extra Large Size

Use `border-left-*` and `border-right-*` class for border left and right color.