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 Title Sizing
You can use any heading tags like H1, H2, H3, H4, H5, H6 to display card title.
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
.
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
.
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é.
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é.
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é.
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é.
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é.
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é.
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é.
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.
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.
Bordered Cards
In need of a colored bordered card? Use .border-*
class with .card
.
Card Borders
In need of a single or multiple colored bordered card? Use .border-top-*
, .border-right-*
, .border-bottom-*
,.border-left-*
class with .card
.
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
.