Card Layout Utility Patterns

Demonstrating spacing, shadows, borders, and other utilities on card layouts.

Basic Card Styling

Shadow Utilities

No Shadow

.shadow-none

Small Shadow

.shadow-sm

Regular Shadow

.shadow

Large Shadow

.shadow-lg

Border Utilities

Primary Border

.border-primary

Success Border (2px)

.border-success .border-2

Danger Border (3px)

.border-danger .border-3

Border Radius Utilities

No Radius

.rounded-0

Large Radius

.rounded-3

XL Radius

.rounded-4

Spacing Patterns

Internal Padding Variations

Compact

.p-2 (0.5rem)

Spacious

.p-4 (1.5rem)

Custom

.px-4 .py-5

Card Grid with Gap Utilities

Using .row with .g-* gap utilities.

1
2
3
4

Background and Color Patterns

Primary Card

.bg-primary .text-white

Dark Card

.bg-dark .text-white

Subtle Card

.bg-body-secondary

Gradient Backgrounds

Gradient Primary

.bg-primary .bg-gradient

Gradient Success

.bg-success .bg-gradient

Real-World Card Patterns

Pricing Card

Most Popular

Pro Plan

$29

/month

  • Unlimited projects
  • Priority support
  • Advanced analytics

Profile Card

JD
Jane Doe

Senior Developer

Online

Building great products with Bootstrap and modern web technologies.

Notification Card

System Update Required

Please update to the latest version for security improvements.