Bootstrap Cards
Card Bootstrap là một trong những component phổ biến nhất, và có lý do chính đáng. Chúng đóng vai trò là container đa phương tiện rất linh hoạt, với nhiều style và format sẵn có đẹp mắt.
Nội dung card có thể là bất cứ thứ gì: text, hình ảnh, link, button, list, và cũng có thể có header (đầu) và footer (chân).
Cơ Bản Về Bootstrap Card
Bootstrap cards được xây dựng bằng flexbox, và mặc định mở rộng theo chiều rộng của phần tử chứa. Nếu muốn chiều rộng khác, có thể dùng utility class width của Bootstrap trên chính card, hoặc wrap card trong container và dùng column classes để định kích thước.
Hãy xem vài ví dụ:
<div class="container-fluid bg-light">
<div class="card p-4 m-4">card 1</div>
<div class="card p-4 m-4">card 2</div>
<div class="card p-4 m-4">card 3</div>
<div class="card-group m-4">
<div class="card p-4">card 4</div>
<div class="card p-4">card 5</div>
<div class="card p-4">card 6</div>
</div>
<div class="card-deck m-4">
<div class="card p-4 m-4">card 7</div>
<div class="card p-4 m-4">card 8</div>
<div class="card p-4 m-4">card 9</div>
</div>
</div>
Quy tắc của Bootstrap: wrap mọi thứ bên trong <body> trong một phần tử CONTAINER, làm cho mọi thứ bên trong responsive – tự điều chỉnh kích thước và layout theo màn hình.
Ví dụ dùng CONTAINER-FLUID – làm full-width, khác với CONTAINER thường (có margin ngang và căn giữa).
Ba card đầu không có phần tử cha ngoài container, nên hành vi mặc định: xếp chồng dọc theo screenshot:
Class p-4 và m-4 đại diện cho padding 1.5rem và margin 1.5rem mọi phía.
Giá trị utility sizing Bootstrap:
- 0 = 0 rem
- 1 = 0.25 rem
- 2 = 0.5 rem
- 3 = 1 rem
- 4 = 1.5 rem
- 5 = 3 rem
Card 4, 5, 6 được wrap trong <div class="card-group">. Chúng hành xử như BTN-GROUP: nối liền nhau theo flexbox ngang, thêm border bo tròn cho cả nhóm.
Card 7, 8, 9 trong <div class="card-deck">: cũng flexbox ngang nhưng tách biệt về mặt visual.
Tự Định Kích Thước Card
Trước khi làm card tùy chỉnh kích thước, hãy tìm hiểu hệ thống layout và breakpoint của Bootstrap.
Bootstrap Columns
Bootstrap chia trang thành 12 cột để phát triển layout dễ dàng.
Demo nhanh:
<div class="row"> <div class="col border p-5">column 1</div> <div class="col border p-5">column 2</div> ... <div class="col border p-5">column 12</div> </div>
Có wrapper ROW – flexbox container cho các cột. Khai báo kích thước: COL-SCREEN SIZE BREAKPOINT-NUMBER OF COLUMNS. Ví dụ không cung cấp breakpoint (muốn mọi màn hình) và bỏ số cột (mặc định COL-1) → 12 cột tự nhiên.
Bootstrap Breakpoints
Bootstrap là framework mobile-first: ưu tiên layout mobile, mở rộng lên các màn hình lớn hơn. Tất cả class ảnh hưởng từ breakpoint cung cấp trở lên.
Extra small (xs) là mặc định: bỏ breakpoint hoàn toàn (ví dụ P-4) = P-XS-4 (áp dụng từ XS trở lên). Muốn rule hiệu lực mọi màn hình → bỏ breakpoint.
Muốn giảm padding thành 0.5rem từ màn hình medium trở lên → thêm class P-MD-2.
Giá trị pixel breakpoint:
- xs – dưới 576px (mặc định)
- sm – từ 576px trở lên
- md – từ 768px trở lên
- lg – từ 992px trở lên
- xl – từ 1200px trở lên
Ví dụ layout thay đổi theo màn hình:
<div class="row">
<div class="col-5 col-md-7">
<div class="card p-4">left column card</div> ...
</div>
<div class="col-7 col-md-5">
<div class="card p-4">right column card</div> ...
</div>
</div>
Left div: 5 cột từ xs, 7 cột từ md. Right div: ngược lại. Screenshot thể hiện sự thay đổi:
767px: left 5 cột, right 7 cột.
768px: đổi ngược lại.
Các Subcomponent Của Card
Tận dụng toàn bộ sức mạnh card bằng cách thử tất cả subcomponent.
Card Với Header Và Footer
<div class="card">
<div class="card-header text-center p-4">I'm a header</div>
<div class="card-body">
<p class="card-text"> first paragraph </p>
<p class="card-text"> second paragraph </p>
<a href="#" class="card-link">Link 1</a>
<a href="#" class="card-link">Link 2</a>
<a href="#" class="card-link">Link 3</a>
</div>
<div class="card-footer"> Footer of a Bootstrap card </div>
</div>
Card có header căn giữa (border, nền xám nhạt), body bên dưới (có padding). Body có đoạn văn với CARD-TEXT cho alignment, link với CARD-LINK (màu xanh, nằm ngang). Footer style giống header nhưng không căn giữa.
Card Với Image Cap Trên
Thêm image cap, title, subtitle trong body, và list group với link làm list item:
<div class="card">
<img src="https://via.placeholder.com/100" alt="" class="card-img-top" />
<div class="card-body">
<h3 class="card-title">card title in the card's body</h3>
<h4 class="card-subtitle mb-4">card subtitle</h4>
<p>list group with links inside:</p>
<ul class="list-group">
<li class="list-group-item"><a href="#" class="card-link">List link 1</a></li>
<li class="list-group-item"><a href="#" class="card-link">List link 2</a></li>
<li class="list-group-item"><a href="#" class="card-link">List link 3</a></li>
</ul>
</div>
</div>
Dùng placeholder.com cho ảnh. Số cuối là width x height pixel, nhưng bị bỏ qua vì CARD-IMG-TOP stretch/shrink ảnh full width card. Title/subtitle format đẹp, dùng utility padding/margin (MB-4 = margin bottom).
Bootstrap Padding/Margin Orientation:
- pt/mt – padding/margin top
- pb/mb – padding/margin bottom
- pl/ml – padding/margin left
- pr/mr – padding/margin right
- py/my – padding/margin trục y (top bottom)
- px/mx – padding/margin trục x (left right)
List group encapsulates list và items với border bo tròn nhẹ.
Image Cap Dưới
Bootstrap không có CARD-IMG-BOTTOM, nhưng dễ "giả lập" bằng div ở dưới card chứa <img class="card-img-top">.
<div class="card">
<div class="card-body">
<p class="card-text"> Lorem ipsum... </p>
</div>
<img src="https://via.placeholder.com/100" alt="" class="card-img-top" />
</div>
Image Cap Bên Cạnh (Horizontal)
Layout ngang bằng cách thêm ROW wrapper trong card, dùng COL cho kích thước ảnh và phần còn lại:
<div class="card">
<div class="row">
<img src="https://via.placeholder.com/100" alt="" class="card-img-top col-6" />
<div class="card-body col-6"> ... </div>
</div>
</div>
Wrap nội dung card trong <div class="row">, thêm COL-6 cho cả ảnh và card-body → card chia 50-50.
Card Image Làm Background
Kéo dài ảnh full card, text/list/link overlay lên trên. Cách làm: <img> class CARD-IMG, nội dung khác trong <div class="card-img-overlay">.
<div class="card">
<img src="https://via.placeholder.com/100" alt="" class="card-img" />
<div class="card-img-overlay">
<h4 class="card-title">Overlay Title</h4>
<p class="card-text"> Image text overlay </p>
<p>second paragraph</p>
<p>third paragraph</p>
<p>fourth paragraph</p>
<div class="btn-group w-100">
<button class="btn btn-primary">blue</button>
<button class="btn btn-info">teal</button>
<button class="btn btn-danger">red</button>
<button class="btn btn-dark">black</button>
<button class="btn btn-success">green</button>
</div>
</div>
</div>
Dùng width utility lần đầu: W-100 trên BTN-GROUP.
Bootstrap Width/Height Utilities:
w/h-25/50/75/100 – width/height 25%/50%/75%/100%. Trong ví dụ là 100% trừ padding như CARD-BODY (được áp dụng bởi CARD-IMG-OVERLAY).
Card Columns
Layout card theo cột: điền từ trên xuống, cột đầy mới sang cột mới.
<div class="card-columns"> <div class="card">...</div> <div class="card">...</div> <div class="card">...</div> <div class="card">...</div> </div>
Wrap tất cả card trong <div class="card-columns">.
Tùy Chỉnh Style Bootstrap Cards
Có thể đổi background, text color, border color/style. Style áp dụng cho cả card, subcomponent riêng lẻ, hoặc cả hai.
<div class="card bg-primary">...</div> <div class="card bg-success text-white">...</div> <div class="card bg-info text-dark border-danger">...</div> <div class="card border-primary bg-dark text-white">...</div>
Card 1: nền xanh (BG-PRIMARY) cho toàn card.
Card 2: nền xanh lá (BG-SUCCESS), chữ trắng (TEXT-WHITE) toàn card, footer chữ đỏ (TEXT-DANGER) ghi đè TEXT-WHITE.
Card 3: nền xanh đậm (BG-INFO), chữ đen (TEXT-DARK), border đỏ (BORDER-DANGER).
Card 4: border xanh (BORDER-PRIMARY), nền đen (BG-DARK), chữ trắng (TEXT-WHITE) toàn card. Header border xanh lá, body chữ đỏ, footer nền vàng (BG-WARNING) chữ xanh đậm (TEXT-INFO).
Tóm Tắt
Bootstrap card là component mạnh mẽ với nhiều tùy chọn. Có thể group thành card-deck (tách biệt, thống nhất) hoặc card-group (gộp thành thực thể đơn). Có thể spread theo hàng ngang, hoặc card-columns cho giao diện khác.
Chúng chứa được ảnh, list, link với nhiều layout. Có header/footer riêng với style sẵn nhưng cho phép tùy chỉnh. Rất linh hoạt – ví dụ điển hình của việc làm được nhiều điều với Bootstrap, setup ít, thời gian ngắn.