Card Options

  1. Home
  2. Components
  3. Bootstrap Cards
Bootstrap CardsButtons Extended

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 smalltag for subtitle.

Card Title with block subtitle

Basic card with block subtitle. Use smalltag with blockclass for block subtitle.

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-colorof a card. Darker colors require the use of.text-white.

Primary Background

Use bg-primaryclass for primary background color.

Success Background

Use bg-successclass for success background color.

Info Background

Use bg-infoclass for info background color.

Warning Background

Use bg-warningclass for warning background color.

Danger Background

Use bg-dangerclass for danger background color.

Custom background

Use bg-colorclass for custom background color.

Card Background Gradient Variants

Cards include their own variant classes for quickly changing the background-color and border-colorof 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-primaryclass for primary outline color.

Success Outline

Use border-successclass for success outline color.

Info Outline

Use border-infoclass for info outline color.

Warning Outline

Use border-warningclass for warning outline color.

Danger Outline

Use border-dangerclass 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-headeralong with .card-head-inverse to make title text readable.

Primary Card Heading

Use bg-primaryclass with card-head for primary card heading color.

Success Card Heading

Use bg-successclass with card-head for success card heading color.

Info Card Heading

Use bg-infoclass with card-head for info card heading color.

Warning Card Heading

Use bg-warningclass with card-head for warning card heading color.

Danger Card Heading

Use bg-dangerclass 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-primaryclass for primary border color.

Success Bordered Card

Use border-successclass for success border color.

Info Bordered Card

Use border-infoclass for info border color.

Warning Bordered Card

Use border-warningclass for warning border color.

Danger Bordered Card

Use border-dangerclass 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.