Cards
Bootstrap Cards
Cards គឺជា flexible និង extensible content containers ដែលមាន options ជាច្រើនសម្រាប់ headers, footers, images, colors និង layouts។ Card គឺជា one of the most popular Bootstrap components។
🎴 Card Anatomy (រចនាសម្ព័ន្ធ Card)
| Component | Class | Purpose | Required? |
|---|---|---|---|
| Card Container | .card |
Main wrapper for entire card | ✅ Required |
| Card Header | .card-header |
Top section (title, tabs, etc.) | ⭕ Optional |
| Card Image (Top) | .card-img-top |
Image at top of card | ⭕ Optional |
| Card Body | .card-body |
Main content area (with padding) | ⭕ Common |
| Card Title | .card-title |
Main heading in body | ⭕ Optional |
| Card Subtitle | .card-subtitle |
Secondary heading | ⭕ Optional |
| Card Text | .card-text |
Paragraph content | ⭕ Optional |
| Card Link | .card-link |
Links with proper spacing | ⭕ Optional |
| Card Footer | .card-footer |
Bottom section (metadata, actions) | ⭕ Optional |
| Card Image (Bottom) | .card-img-bottom |
Image at bottom of card | ⭕ Optional |
🎨 Card Styling Options
| Style Type | Classes | Effect | Use Case |
|---|---|---|---|
| Background Color | bg-primary, bg-success, bg-danger, etc. |
Colored background | Status cards, categories |
| Text Color | text-white, text-dark, text-muted |
Change text color | Contrast with background |
| Border Color | border-primary, border-success, etc. |
Colored border (subtle) | Minimal color accent |
| Border Variants | border-top, border-start, border-end, border-bottom |
Specific side borders | Accent borders |
| Shadow | shadow, shadow-sm, shadow-lg |
Add depth with shadow | Elevated cards |
| Rounded Corners | rounded, rounded-3, rounded-0 |
Adjust corner radius | Style preference |
📐 Card Sizing & Width
| Method | Class/CSS | Result |
|---|---|---|
| Fixed Width | style="width: 18rem;" |
Card with specific width (e.g., 18rem = 288px) |
| Full Width | w-100 |
Card fills container width |
| Percentage Width | w-75, w-50, w-25 |
75%, 50%, 25% of container |
| Grid Column | <div class="col-md-4"><div class="card"> |
Responsive grid sizing |
🖼️ Card Image Options
| Image Type | Class | Position | Notes |
|---|---|---|---|
| Top Image | card-img-top |
Above card-body | Most common placement |
| Bottom Image | card-img-bottom |
Below card-body | Less common |
| Overlay Image | card-img + card-img-overlay |
Background with text overlay | Hero cards, banners |
Card Layouts
Bootstrap ផ្តល់ layout options ជាច្រើនសម្រាប់ arrange cards។
📱 Horizontal Cards
| Structure | Classes Used | Layout |
|---|---|---|
| Horizontal Card | card mb-3 + row g-0 + col-md-4 + col-md-8 |
Image on left, content on right (responsive) |
| Image Column | col-md-4 with img-fluid rounded-start |
33% width image column |
| Content Column | col-md-8 with card-body |
67% width content column |
🎭 List Groups in Cards
| Placement | Class Structure | Use Case |
|---|---|---|
| List with Flush | <ul class="list-group list-group-flush"> |
Remove borders for seamless integration |
| List Items | <li class="list-group-item"> |
Individual items in list |
| Common Use | Features list, menu items, links | Pricing cards, navigation cards |
Card Groups & Grid
Arrange multiple cards together in groups, decks, or grids។
🎴 Card Arrangement Methods
| Method | Class | Behavior | Use Case |
|---|---|---|---|
| Card Group | card-group |
Cards attached, equal height, no gaps | Unified card sets (pricing tables) |
| Grid Columns | row + col-md-4 |
Responsive grid with gaps, flexible heights | Product listings, galleries |
| Row Columns | row row-cols-1 row-cols-md-3 |
Equal columns per row (1 mobile, 3 desktop) | Consistent card grids |
📏 Responsive Card Grid Patterns
| Pattern | Classes | Layout |
|---|---|---|
| 1-2-3 Columns | row-cols-1 row-cols-md-2 row-cols-lg-3 |
1 col mobile, 2 tablet, 3 desktop |
| 1-3-4 Columns | row-cols-1 row-cols-md-3 row-cols-xl-4 |
1 mobile, 3 tablet, 4 large screens |
| Custom Widths | col-12 col-sm-6 col-md-4 col-lg-3 |
Full control at each breakpoint |
✅ Card Best Practices
| ✅ DO | ❌ DON'T |
|---|---|
| Use cards for related content blocks | Use cards for every single element |
| Keep card content concise and focused | Overload cards with too much text |
| Use consistent card heights in grids | Mix drastically different heights |
| Add hover effects for clickable cards | Make non-clickable cards look clickable |
| Use responsive grid for card layouts | Use fixed widths on all screens |
| Optimize images for web (compressed) | Use huge unoptimized images |