Basic Cards
Simple cards with headers, bodies, and optional footers:
Basic Card
A basic card with a header and body. Cards are versatile containers for content.
Card with Footer
This card includes a footer section for additional actions or metadata.
Cards don't require headers. This card only has body content, making it perfect for simple text blocks.
Card Styles
Cards with shadows and background variants:
Shadow Card
This card has a subtle shadow effect for visual depth and prominence.
Primary Background
Cards can have background colors to match their context.
Success Background
Use success variant for positive feedback or completion states.
Bordered Cards
Cards with colored borders to indicate status or category:
Primary Border
Primary bordered card for highlighting important content.
Success Border
Success bordered card for positive status indicators.
Warning Border
Warning bordered card for alerts or attention-required content.
Danger Border
Danger bordered card for errors or critical information.
Cards with Actions
Cards with buttons and interactive elements:
Action Card
Cards can contain action buttons for user interaction.
Footer Actions
This card has its action buttons in the footer section for a cleaner layout.
← Back to Bootstrap Components
Explore all 5 component categories