Card titles and subtitles
Titles, subtitles and header elementsCard title
Basic card example without header elements
Card title
With inline subtitle
Card header with title and inline subtitle
Card title
With block subtitle
Card header with title and block subtitle
Card title options
Card heading font options for titlesCard title
Card title with lighter font weight
Card title
Card title with light font weight
Card title
Card title with regular font weight
Card title
Card title with semibold font weight (default)
Card title
Card title with bold font weight
Card title
Mixing font weights in card title
Card title
Card title in uppercase
Default Muted
Mixing default color with muted color
Default Primary
Mixing default color with primary color
Default Danger
Mixing default color with danger color
Default Success
Mixing default color with success color
Default Warning
Mixing default color with warning color
Default Info
Mixing default color with info color
Default Teal
Mixing default color with custom color
Card title sizing
Card title font colors using standard html headingsH1 title
H1 title heading using
<h1 class="mb-0"> markup
H3 title
H3 title heading using
<h3 class="mb-0"> markup
H5 title
H5 title heading using
<h5 class="mb-0"> markup
H2 title
H2 title heading using
<h2 class="mb-0"> markup
H4 title
H4 title heading using
<h4 class="mb-0"> markup
H6 title
H6 title heading using
<h6 class="mb-0"> markup
Card header options
Background, text and border colorsTransparent header
Default flat card style using
.card class
Card title
Display card header without bottom border
Light header
Card with light header color - add
.bg-light class to card header
container
Dark header
Card with dark header color - add
.bg-dark class to card header
container
Primary header
Card with primary header color - add
.bg-primary class to card header
container
Secondary header
Card with secondary header color - add
.bg-secondary class to card
header container
Green (success) header
Card with green (success context) header - add
.bg-success class to
card header container
Orange (warning) header
Card with orange (warning context) header - add
.bg-warning class to
card header container
Red (danger) header
Card with red (danger context) header - add
.bg-danger class to card
header container
Blue (info) header
Card with blue (info context) header - add
.bg-info class to card
header container
Custom light color
Card header with custom light colors - add
.bg-[color].bg-opacity-10
class to card header container
Custom dark color
Card header with custom dark colors - add
.bg-* class to card header
container
Bordered cards
Available card styles and colorsTransparent header
Default flat card style using
.card class
Card title
Display card header without bottom border
Light header
Card with light header color - add
.bg-light class to card header
container
Dark header
Card with dark header color - add
.bg-dark class to card header
container
Primary header
Card with primary header color - add
.bg-primary class to card header
container
Secondary header
Card with secondary header color - add
.bg-secondary class to card
header container
Green (success) header
Card with green (success context) header - add
.bg-success class to
card header container
Orange (warning) header
Card with orange (warning context) header - add
.bg-warning class to
card header container
Red (danger) header
Card with red (danger context) header - add
.bg-danger class to card
header container
Blue (info) header
Card with blue (info context) header - add
.bg-info class to card
header container
Custom light color
Card header with custom light colors - add
.bg-[color]-100 class to
card header container
Custom dark color
Card header with custom dark colors - add
.bg-* class to card header
container
Card borders
Custom 4 side borders for content cardsTop custom border
Custom color of the top border. Use optional
.rounded-top-0 class to remove rounded top corners
Left custom border
Custom color of the left border. Use optional
.rounded-start-0 class to remove rounded left corners
Top and bottom borders
Custom color of the top and bottom borders. Use
optional
.rounded-0 class to remove rounded corners
Bottom custom border
Custom color of the bottom border. Use optional
.rounded-bottom-0 class to remove rounded bottom corners
Right custom border
Custom color of the right border. Use optional
.rounded-end-0 class to remove rounded right corners
Left and right borders
Custom color of the left and right borders. Use
optional
.rounded-0 class to remove rounded corners
Border sizing
Available in 1 default and 2 optional sizesBasic size
Basic border size of the element, defined in core variables. Any card border can be
highlighted with proper class name
Double size
Double border size using
.border-*-width-2 class, where "*" is border
direction. Use .border-width-2 class to make all borders thicker
Tripple size
Tripple border size using
.border-*-width-3 class, where "*" is border
direction. Use .border-width-3 class to make all borders thicker
Basic size
Basic border size of the element, defined in core variables. Any card border can be
highlighted with proper class name
Double size
Double border size using
.border-*-width-2 class, where "*" is border
direction. Use .border-width-2 class to make all borders thicker
Tripple size
Tripple border size using
.border-*-width-3 class, where "*" is border
direction. Use .border-width-3 class to make all borders thicker
Card backgrounds
Optional default and custom background colorsLight background
Card with light background color using
.bg-light class
Primary background
Card with primary background color using
.bg-primary class
Red (danger) background
Card with red (danger) background color using
.bg-danger class
Green (success) background
Card with green (success) background color using
.bg-success class
Alpha backgrounds
Card with custom light background color using
.bg-[color].bg-opacity-10
class
Dark background
Card with dark background color using
.bg-dark class
Secondary background
Card with secondary background color using
.bg-secondary class
Orange (warning) background
Card with orange (warning) background color using
.bg-warning class
Blue (info) background
Card with blue (info) background color using
.bg-info class
Custom background
Card with custom background color using
.bg-* classes
