Trong giao diện web hiện đại, badge là một chi tiết nhỏ nhưng vô cùng hữu ích: từ hiển thị số lượng thông báo, trạng thái người dùng, đến việc gắn nhãn phụ cho button hay heading. Nhờ vào hệ thống class có sẵn, Bootstrap giúp bạn tạo badge nhanh chóng, đồng bộ giao diện và dễ dàng tùy chỉnh theo nhu cầu.
Đọc bài viết này để hiểu ngay:
- Badge trong Bootstrap là gì và vai trò của nó trong thiết kế web
- Các kiểu badge phổ biến
- Cách tùy chỉnh định dạng cho Badge
- Các trường hợp ứng dụng thực tế
Đọc chi tiết: Bootstrap là gì? 7 tính năng cần biết trong Bootstrap
Badge Bootstrap là gì?
Vai trò của Badge trong thiết kế web
Badge (nhãn hiển thị) là một thành phần nhỏ trong giao diện web, thường dùng để hiển thị thông tin phụ ngắn gọn như số lượng, trạng thái hoặc nhãn phân loại. Ví dụ phổ biến:
- Hiển thị số lượng thông báo chưa đọc
- Gắn nhãn “New” cho một sản phẩm hoặc bài viết
- Thể hiện trạng thái người dùng (Online / Offline)
Mặc dù nhỏ gọn, nhưng badge giúp giao diện trực quan hơn, đồng thời tăng trải nghiệm người dùng khi họ có thêm thông tin nhanh chóng mà không cần đi sâu vào nội dung chi tiết.
Hình ảnh ví dụ về badge:
Tại sao nên dùng Badge Bootstrap?
Khi xây dựng giao diện web, bạn hoàn toàn có thể tự viết CSS để tạo badge bằng cách thêm một thẻ <span> rồi style thủ công với background-color, border-radius, padding… Tuy nhiên, cách này vừa tốn thời gian, vừa dễ dẫn đến tình trạng thiếu đồng bộ trong toàn bộ dự án.
Đây chính là lý do Badge Bootstrap ra đời. Bootstrap đã cung cấp sẵn một component badge với đầy đủ tính năng, giúp bạn tiết kiệm công sức mà vẫn đảm bảo giao diện chuyên nghiệp:
- Nhanh chóng: chỉ cần vài dòng class (.badge, bg-*, rounded-pill…) là có thể tạo ngay một badge đẹp mắt
- Đồng bộ giao diện: badge kế thừa hệ thống màu sắc, font chữ và spacing từ Bootstrap, đảm bảo nhất quán trên toàn bộ website
- Dễ tùy chỉnh: có sẵn nhiều biến thể màu, dạng pill (bo tròn), hoặc mở rộng dễ dàng bằng CSS riêng
- Thân thiện responsive: badge tự động co giãn theo cỡ chữ hoặc button chứa nó, không cần viết thêm media query
Để thấy rõ sự khác biệt, hãy cùng so sánh cách gắn nhãn “Mới” vào tiêu đề bài viết bằng hai phương pháp: tự viết CSS thủ công và sử dụng class có sẵn trong Bootstrap.
- Tự viết thủ công
<h2>Tiêu đề bài viết <span class="custom-badge">New</span></h2>
<style>
.custom-badge {
display: inline-block;
padding: 0.25em 0.6em;
font-size: 0.75em;
font-weight: 600;
background-color: #dc3545;
color: #fff;
border-radius: 0.25rem;
}
</style>- Dùng Badge Bootstrap
<h2>Tiêu đề bài viết <span class="badge badge-sm bg-danger">New</span></h2>Kết quả hiển thị giống nhau:
Như chúng ta thấy, việc sử dụng Badge Bootstrap giúp việc triển khai mã nhanh chóng và đơn giản hơn so với việc thực hiện thủ công. Một số trường hợp sử dụng phổ biến trong thực tế:
- Gắn nhãn “Mới” vào tiêu đề bài viết
- Hiển thị số lượng thông báo trong nút “Notification”
- Thể hiện trạng thái “Đang hoạt động / Tạm ngưng” cho người dùng trong hệ thống quản trị
Đọc chi tiết: Bootstrap CSS là gì: Cách áp dụng và quản lý CSS với Bootstrap
Các nhóm định dạng Badge trong Bootstrap (kèm ví dụ)
Bootstrap cung cấp nhiều cách triển khai badge tuỳ theo ngữ cảnh sử dụng. Dưới đây là ba trường hợp thường gặp nhất:
Badge trong Heading
Badge trong heading thường gắn vào các thẻ tiêu đề từ <h1> đến <h6>. Nhờ việc dùng đơn vị em, badge trong Bootstrap sẽ tự động co giãn theo kích thước chữ của heading.
Cú pháp chung:
<hN>Nội dung tiêu đề <span class="badge bg-[màu]">Nội dung badge</span></hN>Trong đó:
- N là cấp heading từ 1 đến 6
- bg-[màu] chọn màu nền cho badge (ví dụ: bg-primary, bg-danger)
Badge thường được sử dụng trong tiêu đề để nhấn mạnh một nhãn phụ như “Mới” hoặc “Hot”. Ví dụ: gắn nhãn “Mới” vào tiêu đề bài viết:
<h1>Bài viết nổi bật <span class="badge bg-success">Mới</span></h1>
<h3>Chuyên mục <span class="badge bg-warning text-dark">Hot</span></h3>Kết quả hiển thị:
- Với <h1>, badge to hơn, cân đối với tiêu đề chính
- Với <h3>, badge nhỏ lại tương ứng, không cần viết thêm CSS
Badge trong Button
Một trường hợp phổ biến khác là dùng badge để hiển thị số lượng, ví dụ số thông báo chưa đọc. Khi gắn badge vào button, chỉ cần thêm badge đặt ngay sau text của button. Badge sẽ tự động căn chỉnh chiều cao để đồng bộ với nút.
Ví dụ: badge hiển thị số thông báo trong nút Notification:
<button type="button" class="btn btn-primary">
Thông báo <span class="badge bg-light text-dark">4</span>
</button>Kết quả hiển thị:
Đọc chi tiết: Button Bootstrap là gì? Cách sử dụng Button và Button Group
Badge định vị (Positioned Badge)
Từ Bootstrap 5.3, bạn có thể định vị badge ở một góc cụ thể của button hoặc icon. Trường hợp này thường dùng khi muốn badge “nổi” lên trên thành phần chính (giống như số tin nhắn trên biểu tượng ứng dụng). Ví dụ: badge hiển thị số lượng ở góc trên bên phải button:
<button type="button" class="btn btn-primary position-relative">
Hộp thư
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
99+
<span class="visually-hidden">unread messages</span>
</span>
</button>Trong đó:
- position-relative đặt cho button làm gốc định vị
- Sử dụng position-absolute top-0 start-100 translate-middle để đưa badge ra góc trên bên phải
- rounded-pill bg-danger làm badge tròn và có nền đỏ
- visually-hidden thêm mô tả ẩn để hỗ trợ screen reader
Kết quả hiển thị:
Các cách tùy chỉnh Badge Bootstrap
Tùy chỉnh màu nền
Mặc định, Bootstrap cung cấp sẵn một hệ thống class tiện lợi để thay đổi màu nền của badge. Chỉ cần kết hợp class .badge với .bg-* là bạn đã có thể phân loại hoặc nhấn mạnh badge theo trạng thái mong muốn.
Bảng hướng dẫn sử dụng các màu nền thông dụng cho Badge Bootstrap:
| Class màu nền | Mô tả | Cú pháp Badge | Hiển thị |
| .bg-primary | xanh dương, thường dùng cho trạng thái chính | <span class=”badge bg-primary”>Primary</span> | |
| .bg-secondary | xám, dùng cho nhãn trung tính | <span class=”badge bg-secondary”>Secondary</span> | |
| .bg-success | xanh lá, biểu thị thành công hoặc trạng thái tốt | <span class=”badge bg-success”>Success</span> | |
| .bg-danger | đỏ, biểu thị lỗi hoặc cảnh báo nghiêm trọng | <span class=”badge bg-danger”>Danger</span> | |
| .bg-warning | vàng, biểu thị cảnh báo nhẹ, nên kết hợp với text-dark để dễ đọc | <span class=”badge bg-warning text-dark”>Warning</span> | |
| .bg-info | xanh nhạt, dùng cho thông tin bổ sung | <span class=”badge bg-info text-dark”>Info</span> |
Tùy chỉnh bo góc (Pill Badge)
Ngoài dạng badge mặc định có bo góc vuông nhẹ, Bootstrap còn hỗ trợ dạng pill (viên thuốc) để hiển thị badge bo tròn mềm mại hơn. Điều này rất hữu ích khi bạn muốn badge nổi bật hơn hoặc hiển thị số lượng lớn (ví dụ 99+). Cú pháp: chỉ cần thêm class .rounded-pill vào badge.
Ví dụ:
<span class="badge bg-primary rounded-pill">Primary</span>
<span class="badge bg-success rounded-pill">8</span>
<span class="badge bg-danger rounded-pill">99+</span>Kết quả hiển thị:
Tùy chỉnh định dạng riêng bằng CSS
Mặc dù Bootstrap cung cấp sẵn nhiều class tiện lợi như .bg-*, .rounded-pill, hay .text-bg-*, trong thực tế sẽ có những lúc bạn cần badge có định dạng riêng như: to hơn, nhỏ hơn, nền gradient, chữ đậm hơn, hoặc thậm chí chỉ là một chấm tròn báo trạng thái. Bootstrap 5 cho phép bạn tuỳ biến badge theo hai cách:
Tuỳ chỉnh nhanh bằng CSS variables của badge
Kể từ Bootstrap 5.2, badge được hỗ trợ một số biến CSS cục bộ, bạn có thể chỉnh trực tiếp mà không cần biên dịch Sass. Các biến phổ biến:
- –bs-badge-padding-x, –bs-badge-padding-y: điều chỉnh khoảng đệm
- –bs-badge-font-size: điều chỉnh kích cỡ chữ
- –bs-badge-font-weight: điều chỉnh độ đậm của nét chữ
- –bs-badge-color: tùy chỉnh màu chữ
- –bs-badge-border-radius: điều chỉnh bo góc
Ví dụ sử dụng variable để tạo ra 2 biến thể badge có kích cỡ khác nhau:
<span class="badge badge-lg text-bg-primary">Large</span>
<span class="badge badge-thin text-bg-secondary">Thin</span>
<style>
.badge-lg {
--bs-badge-font-size: .9em;
--bs-badge-padding-y: .5em;
--bs-badge-padding-x: .8em;
--bs-badge-font-weight: 600;
}
.badge-thin {
--bs-badge-padding-y: .2em;
--bs-badge-padding-x: .5em;
--bs-badge-font-weight: 500;
}
</style>Kết quả:
Tạo gradient badge
Ngoài việc tinh chỉnh biến có sẵn, bạn có thể viết CSS thủ công để tạo phong cách riêng. Một số ví dụ phổ biến:
- Badge gradient – nền chuyển màu nổi bật: Tạo class custom CSS với thuộc tính background sử dụng linear-gradient
<span class="badge badge-gradient">Premium</span>
<style>
.badge-gradient {
background: linear-gradient(45deg, #0d6efd, #6610f2);
color: #fff;
font-weight: 600;
border-radius: .5rem;
padding: .45em .75em;
}
</style>Kết quả:
- Badge viền (outline badge) nền trong suốt, có viền theo màu chữ:
<span class="badge badge-outline text-success">Success</span>
<style>
.badge-outline {
background-color: transparent;
border: 1px solid currentColor;
padding: .35em .7em;
font-weight: 600;
border-radius: .375rem;
}
</style>Kết quả:
Bảng so sánh hai cách tuỳ chỉnh Badge Bootstrap
| Tiêu chí | CSS variables | CSS thủ công |
| Ưu điểm | Ngắn gọn, chỉ thay đổi đúng phần cần thiết. Vẫn dựa trên style gốc của Bootstrap, nên giữ được sự đồng bộ toàn hệ thống. Dễ bảo trì: khi Bootstrap update badge, phần còn lại không bị lỗi. | Vô cùng linh hoạt, bạn có thể tạo badge hoàn toàn mới (gradient, outline, dot, shadow…). Không bị giới hạn trong phạm vi các biến Bootstrap. Phù hợp khi cần hiệu ứng đặc biệt hoặc thiết kế độc đáo vượt ngoài preset của Bootstrap. |
| Nhược điểm | Giới hạn trong những biến mà Bootstrap đã định nghĩa (font-size, padding, color, radius…) | Viết nhiều CSS hơn, dễ lặp lại code. Nếu Bootstrap thay đổi cấu trúc .badge trong phiên bản mới dẫn đến CSS thủ công có thể bị lỗi |
| Trường hợp sử dụng | – Khi muốn tinh chỉnh nhỏ: tăng/giảm padding, font-size, độ đậm chữ, bo góc…- Muốn giữ đồng bộ tối đa với theme Bootstrap. | – Khi cần badge đặc biệt: gradient, pastel, outline, chấm tròn báo trạng thái…- Khi yêu cầu thiết kế đặc biẹt, không giới hạn bởi preset mặc định. |
Tổng hợp các cú pháp thao tác với Badge Bootstrap
| Chức năng | Cú pháp/Class | Ghi chú |
| Badge cơ bản | <span class="badge bg-primary"> | Kết hợp .badge và .bg-* để tạo badge có màu nền. |
| Badge trong heading | <hN>...<span class="badge ...">...</span></hN> | Badge co giãn theo cỡ chữ của heading. |
| Badge trong button | <button>...<span class="badge ...">...</span></button> | Thường dùng để hiển thị số lượng thông báo. |
| Badge định vị (positioned) | Dùng .position-absolute với badge, kết hợp .position-relative cho phần tử cha | Tạo hiệu ứng “badge nổi ở góc” giống thông báo trên icon. |
| Pill Badge (bo tròn) | <span class="badge rounded-pill"> | Làm badge tròn hơn, phù hợp cho số đếm. |
| Badge màu sắc đặc biệt | <span class="badge text-bg-*> | Phối màu chữ và nền để tạo độ tương phản |
| Badge dạng link | <a href="#" class="badge bg-secondary">...</a> | Tạo badge có thể click và có hiệu ứng hover/click của thẻ a |
Một số trường hợp sử dụng Badge Bootstrap
Badge là thành phần nhỏ nhưng xuất hiện trong rất nhiều tình huống của giao diện web. Dưới đây là những trường hợp phổ biến nhất mà bạn có thể áp dụng ngay trong dự án của mình.
Hiển thị số lượng thông báo hoặc tin nhắn
Đây là cách dùng phổ biến nhất. Badge xuất hiện cạnh nút bấm hoặc icon để hiển thị số lượng thông báo, tin nhắn chưa đọc. Ví dụ hiển thị số thông báo mới trên thanh navbar:
<nav class="navbar bg-body-tertiary px-3">
<a class="navbar-brand" href="#">ITViec Blog</a>
<button class="btn btn-outline-secondary position-relative" aria-label="Xem thông báo">
<i class="bi bi-bell"></i>
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
7
<span class="visually-hidden">thông báo chưa đọc</span>
</span>
</button>
</nav>Kết quả: người dùng ngay lập tức biết mình có 4 thông báo mới mà không cần mở thêm trang.
Gắn nhãn trạng thái (status label)
Badge giúp làm rõ trạng thái của một đối tượng (Active, Pending, Banned, Success, Error…).
<div class="d-flex gap-2 align-items-center">
<span>Nguyen van A</span>
<span class="badge rounded-pill text-bg-secondary">Inactive</span>
</div>
<div class="d-flex gap-2 align-items-center">
<span>Nguyen van B</span>
<span class="badge rounded-pill text-bg-primary">Active</span>
</div>Kết quả:
Hiển thị số lượng sản phẩm trong giỏ hàng
Badge rất hữu ích khi muốn nhấn mạnh một nhãn phụ ngay trong tiêu đề bài viết hoặc thông tin sản phẩm. Cách này giúp người dùng nhanh chóng nhận ra đâu là nội dung mới, nổi bật hoặc đang giảm giá. Ví dụ hiển thị nhãn “Sale” và “-30%” trong tên sản phẩm:
<button class="btn btn-primary position-relative">
<i class="bi bi-cart"></i> Giỏ hàng
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-warning text-dark">
3
<span class="visually-hidden">sản phẩm trong giỏ</span>
</span>
</button>Kết quả:
Tạo điểm nhấn trong tiêu đề/nội dung
Một trường hợp rất phổ biến trong thương mại điện tử là badge được dùng để hiển thị số lượng sản phẩm trong giỏ hàng. Badge thường nằm ở góc nút hoặc icon giỏ, giúp người dùng luôn biết mình đã thêm bao nhiêu sản phẩm. Ví dụ:
<h5 class="mb-1">
Tai nghe X100
<span class="badge text-bg-warning">Sale</span>
<span class="badge text-bg-danger">-30%</span>
</h5>Kết quả:
Những điều lưu ý khi sử dụng Badge Bootstrap
Mặc dù badge là một component nhỏ và rất dễ dùng, nhưng nếu triển khai không đúng cách, chúng có thể gây rối mắt, khó đọc hoặc kém thân thiện với người dùng. Dưới đây là những lưu ý quan trọng bạn cần nắm:
- Badge chỉ nên dùng để bổ sung thông tin ngắn gọn: Badge không phải là thành phần chính của giao diện, mà chỉ đóng vai trò nhấn mạnh hoặc bổ sung. Nếu bạn nhồi quá nhiều nội dung vào badge, nó sẽ làm mất ý nghĩa của thành phần này.
- Chú ý đến khả năng hiển thị: Một số màu nền sáng (ví dụ: .bg-warning, .bg-light) có thể khiến chữ khó đọc nếu để mặc định. Trong trường hợp này, hãy bổ sung text-dark để tăng độ tương phản.
- Không nên lạm dụng badge: Nếu trên cùng một trang bạn gắn quá nhiều badge (nhiều màu sắc, nhiều số đếm), giao diện sẽ trở nên rối rắm. Badge chỉ nên dùng để highlight thông tin quan trọng nhất.
Các câu hỏi thường gặp về Badge Bootstrap
Có nhất thiết phải dùng thẻ <span> để tạo badge không?
Badge của Bootstrap là một lớp giao diện (.badge), không phụ thuộc cứng vào thẻ HTML cụ thể. Bạn có thể dùng với:
- <span>: phổ biến nhất, có định dạng inline, gọn gàng
- <a>: khi muốn tạo badge có thể click được
- <button>: hiển thị số đếm, trạng thái ngay trên nút
Lưu ý: Dù bạn dùng thẻ nào, vẫn phải có class .badge thì mới ra tạo được badge trong Bootstrap.
Muốn badge là một link có thể click được thì làm thế nào?
Để tạo badge có thể click được, bạn có thể làm theo hai cách chính:
Khởi tạo badge trên thẻ <a>
<a href="#" class="badge text-bg-info">Click me</a>
Đặt phần tử badge trong phần tử <a>
<a href="/cart" class="btn btn-primary position-relative">
Giỏ hàng
<span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-warning text-dark">
3
<span class="visually-hidden">sản phẩm trong giỏ</span>
</span>
</a>
Tại sao badge không hiện đúng màu trong Bootstrap 5?
Khi badge của bạn không hiển thị đúng màu như ý muốn, có thể do một nguyên nhân như:
- Dùng nhầm class của Bootstrap 4: Ở Bootstrap 4, cú pháp cấu hình màu cho badge có dạng .badge-primary, .badge-danger,… Tuy nhiên ở Bootstrap 5, đã có sự thay đổi về cú pháp, cụ thể là .bg-primary, .bg-danger hoặc .text-bg-primary, .text-bg-danger,…
- Thiếu class .badge: Chỉ dùng .bg-* mà quên .badge thì phần tử sẽ đổi màu nền nhưng không mang kiểu dáng badge (padding, bo góc…)
- Xung đột CSS tùy chỉnh: Kiểm tra lại các CSS tùy chỉnh trong mã nguồn của bạn để xác định xem có CSS nào đang ghi đè định dạng của badge hay không.
Tổng kết
Badge Bootstrap là một chi tiết nhỏ nhưng hữu ích, giúp bạn hiển thị số lượng, trạng thái hoặc nhãn phụ một cách trực quan mà không tốn nhiều công sức. Với các class có sẵn như .badge, .bg-*, .rounded-pill, Bootstrap giúp bạn bạn dễ dàng tạo badge đẹp mắt, đồng bộ và responsive. Qua bài viết này, ITviec hi vọng đã giúp bạn nắm được cách sử dụng badge trong nhiều ngữ cảnh (heading, button, icon, card…) và có thể áp dụng vào dự án của bạn để tăng tính trực quan và trải nghiệm người dùng.
