Trong giao diện web hiện đại, Card là thành phần quen thuộc để hiển thị nội dung gọn gàng và trực quan. Từ sản phẩm, bài viết cho đến dashboard, card luôn giúp bố cục rõ ràng và dễ đọc. Bootstrap cung cấp component Card với đầy đủ tính năng: header, footer, list group, hình ảnh, màu sắc và responsive.
Đọc bài viết này để hiểu rõ hơn về:
- Card trong Bootstrap là gì và vì sao nên dùng
- Các thành phần cơ bản tạo nên một Card
- Cách định dạng, sắp xếp và tùy chỉnh card
- Những trường hợp ứng dụng trong thực tế
Bootstrap Card là gì?
Vai trò của Card trong thiết kế web
Card (hay còn gọi là “thẻ nội dung”) là một thành phần quen thuộc trong giao diện web, được thiết kế theo dạng hộp chữ nhật có thể chứa nhiều loại nội dung khác nhau: tiêu đề, văn bản, hình ảnh, danh sách, liên kết, nút bấm….
Card thường được dùng để:
- Hiển thị sản phẩm trong website thương mại điện tử
- Trình bày bài viết dạng “preview” với ảnh thumbnail + mô tả ngắn
- Tổ chức thông tin người dùng (profile, contact, status)
- Làm khối thống kê số liệu trong dashboard
Điểm mạnh của Card là tính module. Mỗi card là một khối nội dung độc lập, dễ dàng sắp xếp trong layout và đảm bảo bố cục trực quan, gọn gàng.
Ví dụ về Card trong thiết kế web
Tại sao nên dùng Bootstrap Card?
Trong giao diện web, bạn hoàn toàn có thể xây dựng một card bằng cách kết hợp thẻ <div> với CSS thủ công: thêm border, padding, margin, box-shadow… Tuy nhiên, cách này tốn nhiều thời gian và có thể gây mất đồng bộ giao diện nếu mỗi lập trình viên viết CSS khác nhau.
Bootstrap giải quyết điều này bằng component Card: chỉ với vài class sẵn có, bạn đã có ngay một card đẹp mắt, thống nhất với toàn bộ hệ thống thiết kế. Để thấy rõ sự khác biệt, hãy cùng so sánh cách tạo ra một card hiển thị ảnh + tiêu đề + mô tả + nút bằng hai phương pháp:
- Tự viết thủ công
<div class="custom-card">
<img src="https://picsum.photos/300/200" alt="Ảnh sản phẩm">
<div class="custom-card-body">
<h3>Sản phẩm A</h3>
<p>Đây là mô tả ngắn gọn về sản phẩm.</p>
<a href="#" class="btn">Mua ngay</a>
</div>
</div>
<style>
.custom-card {
width: 18rem;
border: 1px solid #ddd;
border-radius: 0.5rem;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.custom-card img {
width: 100%;
display: block;
}
.custom-card-body {
padding: 1rem;
}
.custom-card-body h3 {
margin-bottom: .5rem;
font-size: 1.25rem;
}
.custom-card-body p {
margin-bottom: .75rem;
color: #555;
}
.custom-card-body .btn {
display: inline-block;
padding: .375rem .75rem;
background-color: #0d6efd;
color: #fff;
border-radius: .25rem;
text-decoration: none;
}
</style>- Sử dụng Bootstrap
<div class="card" style="width: 18rem;">
<img src="https://picsum.photos/300/200" class="card-img-top" alt="Ảnh sản phẩm">
<div class="card-body">
<h5 class="card-title">Sản phẩm A</h5>
<p class="card-text">Đây là mô tả ngắn gọn về sản phẩm.</p>
<a href="#" class="btn btn-primary">Mua ngay</a>
</div>
</div>Kết quả cả hai cách đều tạo được card có ảnh, tiêu đề, mô tả và nút bấm như nhau:
Nhưng khi dùng Bootstrap Card, bạn tiết kiệm được rất nhiều thời gian vì:
- Không cần viết CSS thủ công (chỉ cần class .card, .card-body, .card-title…)
- Đồng bộ giao diện: card tự động kế thừa style chung từ Bootstrap (font, màu, spacing).
- Dễ mở rộng: thêm header, footer, list group, nav… chỉ bằng vài class bổ sung.
- Responsive mặc định: card co giãn theo grid system, không cần viết media query.
Các thành phần cơ bản có trong Card
Bootstrap Card được xây dựng theo cấu trúc linh hoạt bao gồm: phần body (chứa nội dung chính), header/footer (thêm ngữ cảnh), hình ảnh và list group. Nắm rõ từng thành phần sẽ giúp bạn dễ dàng kết hợp để tạo card hoàn chỉnh.
Cấu trúc nền tảng của Card
Một card cơ bản trong Bootstrap gồm 2 phần:
- Thẻ <div> có class .card ngoài cùng đóng vai trò là khung chứa
- Phần nội dung được đặt trong thẻ <div> với class .card-body.
Ví dụ một Card với nội dung đơn giản:
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Tiêu đề Card</h5>
<p class="card-text">Đây là đoạn mô tả ngắn trong card.</p>
<a href="#" class="btn btn-primary">Xem chi tiết</a>
</div>
</div>Hiển thị:
Phân chia nội dung trong Card Body
Card body là khu vực nội dung chính của card. Bạn đặt tiêu đề, phụ đề, đoạn văn, liên kết, nút… vào trong .card-body để có padding chuẩn và khoảng cách hợp lý. Các khối nội dung phổ biến trong .card-body bao gồm:
- Tiêu đề: dùng .card-title trên thẻ h* (h5, h6…)
- Phụ đề: dùng .card-subtitle (nên đặt ngay sau title)
- Đoạn văn: dùng .card-text cho phần mô tả
- Liên kết: dùng .card-link để 2–3 link nằm cạnh nhau có khoảng cách hợp lý
Ví dụ:
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Tiêu đề chính</h5>
<h6 class="card-subtitle mb-2 text-body-secondary">Tiêu đề phụ</h6>
<p class="card-text">
Một đoạn mô tả ngắn để dẫn dắt nội dung chính của card.
</p>
<a href="#" class="card-link">Liên kết 1</a>
<a href="#" class="card-link">Liên kết 2</a>
</div>
</div>Trong đó:
- .card-subtitle hiển thị mảnh hơn .card-title để không lấn át tiêu đề
- .card-link tự thêm khoảng cách ngang giữa các link, không cần thêm margin thủ công
- Dùng tiện ích khoảng cách như mb-2, mb-3 để chỉnh spacing theo ý
Hiển thị:
Header và Footer
Không phải nội dung nào cũng nên dồn hết vào body. Nhiều lúc bạn cần một “nhãn” để mở đề (Featured, Pricing, News…) và một chỗ nhỏ cho thông tin bổ sung (thời gian cập nhật, trạng thái). Đó là lúc header và footer phát huy tác dụng: giúp card có cấu trúc rõ ràng, người đọc lướt mắt là hiểu ngay.
Cấu trúc của header và footer trong Card như sau:
<div class="card">
<div class="card-header">...</div>
<div class="card-body">...</div>
<div class="card-footer">...</div>
</div>Lưu ý, để cải thiện semantics/SEO cho trang web, phần header bạn có thể sử dụng các thẻ heading thay cho thẻ <div>
<!-- Header là heading (tốt cho semantics/SEO) -->
<div class="card">
<h5 class="card-header">...</h5>
<div class="card-body">...</div>
</div>Ví dụ:
<div class="card" style="max-width: 28rem;">
<div class="card-header">Thông báo bảo trì</div>
<div class="card-body">
<h5 class="card-title">Bảo trì định kỳ 23:00–23:30</h5>
<p class="card-text">
Trong thời gian trên, một số tính năng có thể gián đoạn. Rất mong bạn thông cảm.
</p>
<a href="/status" class="btn btn-primary">Xem trạng thái hệ thống</a>
</div>
<div class="card-footer text-body-secondary">
Cập nhật: 20:15, 26/08/2025
</div>
</div>Kết quả:
Trong đó, Header/Footer có nền và viền riêng (theo theme của card), padding được tối ưu để đóng vai trò “mở/đóng” khối.
Hình ảnh trong Card
Ảnh giúp card “bắt mắt” và truyền tải thông tin nhanh hơn chữ. Với Bootstrap, bạn thêm ảnh vào card nhanh chóng bằng class .card-img. Card có hình ảnh thường được sử dụng trong trường hợp phổ biến như Card sản phẩm, bài viết nổi bật, banner sự kiện, case study/dự án.
Ví dụ thêm hình ảnh trong Card:
<div class="card" style="width: 21rem;">
<img src="https://cdn.shopify.com/s/files/1/0105/4542/products/tma-2.5_grande.jpg?v=1391540543" class="card-img" alt="Ảnh Tai nghe X100">
<div class="card-body">
<h5 class="card-title">Tai nghe X100</h5>
<p class="card-text">Âm trầm mạnh, pin 30 giờ, sạc nhanh 15’ dùng 3 giờ.</p>
<a href="/san-pham/tai-nghe-x100" class="btn btn-primary">Mua ngay</a>
</div>
</div>Hiển thị:
Danh sách nội dung (List Group)
Trong trường hợp bạn cần liệt kê nhiều mục (thuộc tính, quyền lợi, danh mục…) trong cùng một card. Bạn có thể sử dụng thành phần List Group của Card Bootstrap. Cú pháp chuẩn bao gồm:
<div class="card">
<div class="card-header">...</div>
<ul class="list-group">
<li class="list-group-item">...</li>
<li class="list-group-item">...</li>
</ul>
<div class="card-footer">...</div>
</div>Trong đó:
- .list-group là container chứa các phần tử trong danh sách
- .list-group-item là các phần tử trong danh sách
Ví dụ:
<div class="card" style="width: 20rem;">
<div class="card-header">Thông tin gói Pro</div>
<ul class="list-group">
<li class="list-group-item">Không giới hạn dự án</li>
<li class="list-group-item">Hỗ trợ 24/7</li>
<li class="list-group-item">Cập nhật miễn phí</li>
</ul>
</div>Hiển thị:
Lưu ý, bạn có thể sử dụng .list-group-flush để loại bỏ viền/đệm thừa, giúp Card trông dễ nhìn hơn. Nếu phần tử là link, thêm .list-group-item-action để có hover/click đồng nhất.
<div class="card" style="width: 20rem;">
<div class="card-header">Thông tin gói Pro</div>
<ul class="list-group list-group-flush">
<li class="list-group-item list-group-item-action">Không giới hạn dự án</li>
<li class="list-group-item list-group-item-action">Hỗ trợ 24/7</li>
<li class="list-group-item list-group-item-action">Cập nhật miễn phí</li>
</ul>
</div>
Kết hợp tất cả thành phần (Kitchen Sink)
Trong dự án thực tế, một card hiếm khi chỉ có mỗi tiêu đề và vài dòng mô tả. Thường bạn cần ảnh thumbnail để nhận diện, nội dung tóm tắt + nút hành động chính (CTA), thêm chi tiết dạng gạch đầu dòng cho người đọc lướt nhanh, vài đường link phụ để “đi sâu” và cuối cùng là metadata (thời gian cập nhật, trạng thái…).
“Kitchen Sink” là ví dụ tổng hợp để cho thấy cách xếp các mảnh ghép theo đúng thứ tự ưu tiên để card vừa đầy đủ vừa dễ đọc. Ví dụ xây dựng 1 card về thông tin khóa học:
<div class="card" style="max-width: 24rem;">
<!-- Ảnh -->
<img src="https://picsum.photos/640/360" class="card-img-top" alt="Ảnh banner khóa học ReactJS">
<!-- Nội dung chính + CTA -->
<div class="card-body">
<h5 class="card-title">Khóa học ReactJS từ A–Z</h5>
<p class="card-text">6 tuần: từ component cơ bản đến hooks, routing & tối ưu hiệu năng.</p>
<a href="/khoa-hoc/reactjs" class="btn btn-primary">Đăng ký ngay</a>
</div>
<!-- Chi tiết lướt nhanh -->
<ul class="list-group list-group-flush">
<li class="list-group-item">Lịch: Tối 2–4–6 (19:00–21:00)</li>
<li class="list-group-item">Hình thức: Học online qua Zoom</li>
<li class="list-group-item">Tặng: Slide + mã nguồn mẫu</li>
</ul>
<!-- Link phụ -->
<div class="card-body">
<a href="/khoa-hoc/reactjs/chuong-trinh" class="card-link">Xem chương trình học</a>
<a href="/khoa-hoc/reactjs/faq" class="card-link">Câu hỏi thường gặp</a>
</div>
<!-- Metadata -->
<div class="card-footer text-body-secondary">
Cập nhật: 25/08/2025 • Còn 12 chỗ
</div>
</div>Hiển thị:
Các cách định dạng cho Card
Tùy chỉnh kích thước Card
Card trong Bootstrap không có class riêng để thay đổi kích thước, nhưng bạn có thể:
- Giới hạn chiều rộng bằng inline style (style=“width: 18rem;”) hoặc class tiện ích (w-50, w-75, w-100).
- Chiều cao tự động co giãn theo nội dung. Nếu muốn cố định chiều cao, hãy dùng h-100, min-vh-50…
Ví dụ:
<div class="card w-50">
<div class="card-body">
<h5 class="card-title">Card 50% chiều rộng</h5>
<p class="card-text">Thẻ này chiếm nửa chiều ngang của container.</p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card 100% chiều rộng</h5>
<p class="card-text">Thẻ này chiếm toàn bộ chiều ngang của container.</p>
</div>
</div>Kết quả:
Định dạng Grid cards
Với grid system của Bootstrap, bạn có thể tùy biến cách bố trí các Card trong một container, ví dụ như đặt nhiều card trong một hàng và tự động co giãn.
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
<div class="col">
<div class="card h-100">
<img src="https://picsum.photos/300/200" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Nội dung mô tả ngắn gọn.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://picsum.photos/300/200" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">Card 2</h5>
<p class="card-text">Nội dung mô tả ngắn gọn.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="https://picsum.photos/300/200" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">Card 3</h5>
<p class="card-text">Nội dung mô tả ngắn gọn.</p>
</div>
</div>
</div>
</div>Kết quả trên Desktop:
Kết quả trên Mobile:
Đọc chi tiết: Bootstrap Grid System là gì: Cách dùng từ cơ bản đến nâng cao
Card groups
Khi cần nhiều card nằm cạnh nhau có chiều cao bằng nhau, bạn có thể dùng .card-group. Các thẻ Card cùng một group sẽ tự động điều chỉnh chiều cao bằng nhau, thay đổi border để tạo thành một khối đồng bộ. Ví dụ:
<div class="card-group">
<div class="card">
<img src="https://picsum.photos/200/150" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">Card A</h5>
<p class="card-text">Nội dung của Card</p>
</div>
</div>
<div class="card">
<img src="https://picsum.photos/200/150" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">Card B</h5>
<p class="card-text">Nội dung của Card</p>
</div>
</div>
<div class="card">
<img src="https://picsum.photos/200/150" class="card-img-top" alt="">
<div class="card-body">
<h5 class="card-title">Card C</h5>
<p class="card-text">Nội dung của Card</p>
</div>
</div>
</div>Hiển thị:
Navigation trong Card
Bạn cũng có thể kết hợp các thành phần nav hoặc tab bên trong body của card để tổ chức nội dung thành nhiều phần. Ví dụ card có tab:
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Tab 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Tab 2</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Nội dung Tab 1</h5>
<p class="card-text">Bạn có thể thay đổi nội dung theo tab.</p>
<a href="#" class="btn btn-primary">Xem thêm</a>
</div>
</div>Hiển thị:
Cách triển khai này phù hợp cho dashboard hoặc profile nhiều thông tin.
Đọc chi tiết: Navbar Bootstrap: Hướng dẫn tạo Header chuyên nghiệp cho web
Tùy chỉnh Background, Color, Border
Một card mặc định trong Bootstrap sẽ có nền trắng, chữ tối và viền xám nhạt. Nhưng đôi khi bạn sẽ muốn card nổi bật hơn hoặc truyền tải trạng thái cụ thể (thành công, cảnh báo, lỗi…). Đây là lúc chúng ta tận dụng hệ thống class tiện ích mà Bootstrap cung cấp.
Đổi nền cho Card (Background)
Bạn có thể áp dụng các class .bg-* trực tiếp vào .card để thay đổi màu nền toàn bộ thẻ. Ví dụ:
<div class="card bg-primary text-white mb-3" style="max-width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card nền xanh</h5>
<p class="card-text">Thường dùng cho nội dung nổi bật hoặc CTA.</p>
</div>
</div>
<div class="card bg-warning mb-3" style="max-width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card nền vàng</h5>
<p class="card-text">Phù hợp cho thông báo hoặc cảnh báo nhẹ.</p>
</div>
</div>Hiển thị:
Đọc chi tiết: Bootstrap color: Cách sử dụng hệ thống màu trong Bootstrap
Điều chỉnh màu chữ (Text Color)
Khi thay đổi nền, bạn cũng nên kiểm tra độ tương phản của chữ. Bootstrap hỗ trợ các class .text-* để xử lý nhanh việc thay đổi màu chữ như:
- .text-white: chữ sáng, dùng trên nền tối
- .text-dark: chữ đậm, dùng trên nền sáng
- .text-muted: chữ nhạt, thường dùng cho ghi chú trong card
Ví dụ:
<div class="card bg-dark text-white mb-3" style="max-width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card nền tối</h5>
<p class="card-text text-warning">Dòng chữ này màu cam để làm nổi bật.</p>
</div>
</div>Hiển thị:
Tùy chỉnh viền của Card (Border)
Viền là yếu tố giúp card phân tách với nội dung xung quanh. Với Bootstrap, bạn có thể tùy biến định dạng viền của card bằng hệ thống class .border-* như:
- Tăng/giảm độ đậm của viền với .border-1, .border-2, .border-3,…
- Đổi màu viền bằng .border-primary, .border-success, .border-danger,…
- Chỉ áp dụng viền cho một cạnh: .border-top, .border-start,…
Ví dụ, để tạo 1 card chỉ có viền trên và viền dưới, viền đậm hơn và có màu xanh:
<div class="card border-0 border-top border-bottom border-5 border-primary" style="max-width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card có viền trên/dưới và độ dày 5px</h5>
<p class="card-text">Nội dung của Card.</p>
</div>
</div>Hiển thị:
Đọc chi tiết: Border Bootstrap là gì? 10+ cách thiết kế viền đẹp với Bootstrap
Bảng tổng hợp các class để định dạng Bootstrap Card
| Class | Ý nghĩa |
| .card | Tạo vùng chứa bên ngoài của card (có border, radius, shadow mặc định) |
| .card-body | Vùng nội dung chính của card (padding chuẩn) |
| .card-title | Định dạng tiêu đề chính trong card body |
| .card-subtitle | Định dạng tiêu đề phụ, nên đặt ngay sau .card-title |
| .card-text | Đoạn văn bản mô tả trong card body |
| .card-link | Liên kết trong card, tự thêm spacing giữa nhiều link |
| .card-header | Phần header của card (nhãn mở đầu, tab, nav) |
| .card-footer | Phần footer (thông tin bổ sung, metadata) |
| .card-img | Chèn ảnh full chiều rộng của card (cover) |
| .list-group + .list-group-item | Tích hợp danh sách trong card |
| .list-group-flush | Xóa border & padding dư thừa khi list group nằm trong card |
| .card-group | Gom nhiều card ở cạnh nhau, đồng bộ về chiều cao |
Các trường hợp sử dụng Bootstrap Card
Card là thành phần đa năng có thể tái sử dụng trong nhiều bối cảnh giao diện web. Dưới đây là 5 trường hợp phổ biến nhất, nơi Bootstrap Card phát huy tối đa hiệu quả của nó.
Card sản phẩm (E-commerce Product)
Trong các website thương mại điện tử, card gần như là “vật bất ly thân”. Mỗi sản phẩm thường được đóng gói trong một card bao gồm: ảnh thumbnail, tên sản phẩm, giá bán và nút hành động (“Mua ngay”, “Thêm vào giỏ”).
Điểm mạnh ở đây là tính module: bạn có thể hiển thị hàng chục, thậm chí hàng trăm sản phẩm trong một lưới card đồng bộ về kích thước và cách trình bày. Người dùng chỉ cần lướt mắt qua là đã nắm được thông tin chính.
Ví dụ:
<div class="card" style="width: 18rem;">
<img src="https://cdn.shopify.com/s/files/1/0105/4542/products/tma-2.5_grande.jpg?v=1391540543" class="card-img" alt="Ảnh Tai nghe X100">
<div class="card-body">
<h5 class="card-title">Tai nghe XYZ Pro</h5>
<p class="card-text text-danger fw-bold">1.590.000₫</p>
<a href="#" class="btn btn-primary w-100">Mua ngay</a>
</div>
</div>Hiển thị:
Card bài viết (Blog / News Preview)
Với website tin tức hay blog, card được dùng để hiển thị bài viết dạng preview: một ảnh thumbnail, tiêu đề hấp dẫn, đoạn mô tả ngắn và metadata (ngày đăng, tác giả).
Ưu điểm của cách trình bày này là người đọc dễ quét thông tin. Thumbnail giúp nhận diện nhanh chủ đề, còn tiêu đề + mô tả ngắn đủ để họ quyết định có muốn click đọc tiếp hay không.
Ví dụ:
<div class="card" style="max-width: 26rem;">
<img src="https://itviec.com/blog/wp-content/uploads/2025/07/form-bootstrap-2048x1078.png" class="card-img-top" alt="Ảnh bài viết">
<div class="card-body">
<h5 class="card-title">Form Bootstrap là gì: Thực hành tạo form từ cơ bản đến nâng cao</h5>
<p class="card-text">Trong thế giới phát triển giao diện web, form là nơi người dùng tương tác nhiều nhất, từ việc điền thông tin của người dùng…</p>
<a href="#" class="btn btn-outline-primary btn-sm">Bắt đầu đọc (23 phút) -></a>
</div>
<div class="card-footer text-body-secondary small">
Bởi Nguyễn Văn A • 20/08/2025
</div>
</div>Hiển thị:
Card hồ sơ người dùng (User Profile)
Trong các mạng xã hội, ứng dụng quản trị hoặc hệ thống quản lý người dùng, card thường dùng để hiển thị thông tin cá nhân gọn gàng: avatar, tên, chức danh, số liệu và các nút hành động (“Theo dõi”, “Nhắn tin”). Điểm mạnh là card giúp cá nhân hóa thông tin nhưng vẫn giữ layout đồng bộ cho nhiều người dùng khác nhau.
Ví dụ:
<div class="card" style="max-width: 22rem;">
<div class="card-body d-flex align-items-center">
<img src="https://i.pravatar.cc/80" alt="Avatar" class="rounded-circle me-3" width="64" height="64">
<div>
<h5 class="card-title mb-1">Nguyễn Minh Khôi</h5>
<p class="card-text small text-body-secondary mb-0">Product Designer</p>
</div>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item d-flex justify-content-between">Dự án <span class="badge bg-secondary">12</span></li>
<li class="list-group-item d-flex justify-content-between">Người theo dõi <span class="badge bg-secondary">1.2k</span></li>
</ul>
<div class="card-body">
<a href="#" class="btn btn-outline-primary me-2">Theo dõi</a>
<a href="#" class="btn btn-primary">Nhắn tin</a>
</div>
</div>Hiển thị:
Card thống kê số liệu (Dashboard KPI)
Trong dashboard quản trị, card là giải pháp lý tưởng để hiển thị các chỉ số quan trọng (KPI): doanh thu, số đơn hàng, người dùng mới, tiến độ dự án… Lý do card phù hợp ở đây là:
- Mỗi KPI là một khối độc lập, dễ sắp xếp
- Con số lớn đặt trong card giúp người quản trị nhìn thoáng qua là nắm được tình hình
- Có thể kết hợp với màu sắc, biểu đồ mini hoặc progress bar để tăng tính trực quan
Ví dụ:
<div class="card border-0 shadow-sm text-center" style="width: 16rem;">
<div class="card-body">
<p class="text-body-secondary mb-1">Doanh thu hôm nay</p>
<h3 class="mb-2">42.3 triệu ₫</h3>
<p class="small mb-0 text-success">▲ +12% so với hôm qua</p>
</div>
</div>Hiển thị:
Card thông báo & trạng thái hệ thống
Một ứng dụng hay website hiện đại thường có khu vực thông báo (maintenance, sự cố dịch vụ, cập nhật mới…). Card là lựa chọn phù hợp nhờ khả năng hiển thị nội dung ngắn gọn, phân biệt bằng màu sắc nền (bg-success, bg-warning, bg-danger).
Ví dụ:
<div class="card text-white bg-danger" style="max-width: 28rem;">
<div class="card-header">Sự cố dịch vụ</div>
<div class="card-body">
<h5 class="card-title">Gián đoạn thanh toán</h5>
<p class="card-text">Cổng thanh toán bên thứ ba đang gặp trục trặc. Chúng tôi đang khắc phục.</p>
<a href="/status" class="btn btn-light">Xem chi tiết</a>
</div>
<div class="card-footer small">Cập nhật: 26/08/2025 20:15</div>
</div>Hiển thị:
Những lưu ý khi sử dụng Bootstrap Card
Card trong Bootstrap là một công cụ mạnh mẽ để nâng cao chất lượng giao diện, nhưng để dùng hiệu quả và tránh gây ảnh hưởng xấu đến trải nghiệm người dùng (UX), bạn cần chú ý một số điểm sau.
- Không lạm dụng Card: Card thích hợp cho nội dung độc lập (sản phẩm, bài viết, profile). Nếu mọi thứ đều đặt vào card, trang sẽ trở nên nặng nề và rối mắt.
- Đảm bảo tính responsive: Tránh cố định chiều rộng card bằng inline style. Thay vào đó, hãy tận dụng grid system (row-cols-1 row-cols-md-2…) để card tự co giãn trên mọi thiết bị.
- Kiểm soát độ dài nội dung: Khi các card nằm cạnh nhau, nội dung quá chênh lệch sẽ làm bố cục mất cân đối. Hãy dùng .card-group hoặc cắt ngắn mô tả để giữ chiều cao đồng đều.
- Sử dụng ảnh hợp lý: Luôn thêm alt cho ảnh để hỗ trợ SEO và accessibility. Đồng thời nên chọn ảnh cùng tỷ lệ để card xếp hàng ngay ngắn, tránh tình trạng “lộn xộn” chiều cao.
- Tận dụng class tiện ích có sẵn: Tránh viết quá nhiều CSS thủ công đối với những định dạng mà Bootstrap đã cung cấp sẵn như định dạng border, màu sắc, kiểu chữ,…
- Giữ hierarchy rõ ràng: Trong một card, nên sắp xếp theo trật tự: ảnh → tiêu đề → mô tả → CTA → metadata. Nếu đảo lộn, người dùng sẽ khó xác định đâu là thông tin quan trọng.
- Hạn chế hiệu ứng bóng và border: Card có thể nổi bật hơn nhờ shadow hoặc border, nhưng nếu dùng tràn lan sẽ gây rối mắt. Chỉ nên nhấn mạnh card quan trọng, còn lại giữ đơn giản.
Các câu hỏi thường gặp về Bootstrap card
Có thể loại bỏ viền card không?
Hoàn toàn có thể. Bootstrap hỗ trợ class .border-0 để loại bỏ toàn bộ viền card. Trong trường hợp bạn chỉ muốn bỏ viền một cạnh, có thể dùng .border-top-0, .border-start-0… Điều này rất hữu ích khi bạn muốn card “thoáng” hơn, chỉ nổi bật bằng bóng đổ (shadow) thay vì viền.
Ví dụ về card không có viền và sử dụng shadow để tạo hiệu ứng:
<div class="card border-0 shadow-sm" style="max-width: 20rem;">
<img src="https://picsum.photos/320/200" class="card-img-top" alt="Ảnh sản phẩm demo">
<div class="card-body">
<h5 class="card-title">Sản phẩm Demo</h5>
<p class="card-text">Đây là một card không viền, chỉ dùng bóng đổ nhẹ để phân tách với nền.</p>
<a href="#" class="btn btn-primary">Mua ngay</a>
</div>
</div>Trong đó:
- .border-0: bỏ toàn bộ viền mặc định của card
- .shadow-sm: thêm bóng nhẹ để card vẫn nổi bật trên nền trắng
Hiển thị:
Card group có tự động bằng chiều cao và chiều rộng không?
Khi đặt các card trong .card-group, Bootstrap sẽ tự đồng bộ chiều cao để các card cân bằng nhau, rất thích hợp khi hiển thị nhiều card cùng hàng. Tuy nhiên, chiều rộng không tự động chia đều, nó phụ thuộc vào grid system hoặc container. Nếu muốn card bằng nhau cả về chiều rộng, bạn nên đặt .card-group trong row + col.
Ví dụ:
<div class="row">
<div class="col-md-4">
<div class="card-group h-100">
<div class="card">
<img src="https://picsum.photos/400/250?1" class="card-img-top" alt="Ảnh 1">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">
Đây là card đầu tiên, nội dung ngắn gọn hơn.
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card-group h-100">
<div class="card">
<img src="https://picsum.photos/400/250?2" class="card-img-top" alt="Ảnh 2">
<div class="card-body">
<h5 class="card-title">Card 2</h5>
<p class="card-text">
Card này có phần nội dung dài hơn một chút để minh họa việc đồng bộ chiều cao giữa các card trong cùng hàng.
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card-group h-100">
<div class="card">
<img src="https://picsum.photos/400/250?3" class="card-img-top" alt="Ảnh 3">
<div class="card-body">
<h5 class="card-title">Card 3</h5>
<p class="card-text">
Đây là card cuối cùng, nội dung trung bình.
</p>
</div>
</div>
</div>
</div>
</div>Hiển thị:
Bootstrap 5 có hỗ trợ .card-deck không?
Không. Kể từ Bootstrap 5, .card-deck đã bị loại bỏ. Thay vào đó, bạn hãy dùng grid system (row, col với row-cols-*) hoặc .card-group để sắp xếp card. Cách này linh hoạt hơn, đảm bảo responsive tốt hơn và dễ kết hợp với các tiện ích khác của Bootstrap.
Đọc chi tiết: Bootstrap Grid System là gì: Cách dùng từ cơ bản đến nâng cao
Tổng kết
Bootstrap Card là thành phần nhỏ gọn nhưng cực kỳ hữu ích, giúp bạn trình bày nội dung trực quan, đồng bộ và dễ mở rộng. Với các class sẵn có, bạn có thể nhanh chóng tạo card từ đơn giản đến phức tạp mà không cần viết nhiều CSS. Qua bài viết này, ITViec hi vọng đã mang đến cho bạn đọc những nội dung bổ ích để bạn có thể nắm vững cách sử dụng hiệu quả Bootstrap Card và áp dụng vào dự án của bản thân.
