Bài 12: Badge trong Bootstrap 5
Badge trong Bootstrap rất cần thiết khi phát triển web và ứng dụng. Ở bài này, hãy cùng Quantrimang.com tìm hiểu cách dùng badge trong Bootstrap như thế nào nhé!
Nếu thường xuyên lướt web hay dùng ứng dụng, bạn sẽ thấy badge hay huy hiệu xuất hiện thường xuyên. Chúng có thể là các biểu tượng thông báo, nút điều hướng hoặc đánh dấu nội dung đặc biệt nào đó.
Badge trong Bootstrap 5 cũng tương tự như vậy. Nó là một nhãn hiện thông tin ngắn dưới một hình dạng nhỏ. Nó được dùng để thêm thông tin phụ vào các phần tử khác trên trang web.
Cách dùng Badge trong Bootstrap 5 rất dễ. Về cơ bản, bạn chỉ cần dùng các lớp css .badge và badge-* trong thẻ span hoặc div. Ví dụ, nếu muốn tạo một huy hiệu màu xanh lá cây, bạn có thể dùng mã HTML sau:
<span class="badge badge-success">Thông tin quan trọng</span>
Những lớp CSS như .badge-pill và .badge-lg giúp bạn tạo badge hình tròn hoặc lớn hơn. Ví dụ code mẫu tạo huy hiệu tròn lớn màu đỏ:
<span class="badge badge-pill badge-lg badge-danger">Thông báo</span>
Ngoài ra, bạn còn có thể dùng các lớp .badge-primary, .badge-secondary, .badge-success, .badge-info, .badge-warning, .badge-danger, .badge-light và .badge-dark để thiết kế huy hiệu trong Bootstrap 5. Dưới đây là hướng dẫn chi tiết:
Badge thường được dùng để hiển thị thông tin bổ sung đánh dấu các mục mới hoặc chưa đọc. Để tạo Badge, bạn chỉ cần thêm <span class = "badge">
vào các link, nav...
Khi phần thông tin bổ sung bị trống, Badge sẽ được thu gọn thông qua selector :empty
Badge thường dùng trong một số trường hợp như ảnh dưới đây:
Badge theo ngữ cảnh
Sử dụng class .badge
cùng với lớp ngữ cảnh (như .bg-secondary
) trong các phần tử <span>
để tạo các badge chữ nhật với màu sắc tương ứng. Xem ví dụ sau để hiểu rõ hơn:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ví dụ về Bootstrap - Quản Trị Mạng</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Các ví dụ về Badge</h1>
<h2>Heading ví dụ <span class="badge bg-primary">Mới</span></h2>
<h3>Các bài báo chưa đọc <span class="badge bg-success">5</span></h3>
<h4>Bạn có tin nhắn mới <span class="badge bg-warning">20+</span></h4>
<h5>Một số ví dụ khác <span class="badge bg-danger">HOT</span></h5>
</div>
</body>
</html>
Sẽ cho kết quả như sau:
Pill Badge
Ngoài các Badge hình chữ nhật bo góc, bạn có thể tạo những Badge mềm mại hơn với việc sử dụng thêm class .rounded-pill
trong <span>
tương ứng:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ví dụ về Bootstrap - Quản Trị Mạng</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h1>Các ví dụ về Badge</h1>
<h2>Heading ví dụ <span class="badge rounded-pill bg-primary">Mới</span></h2>
<h3>Các bài báo chưa đọc <span class="badge rounded-pill bg-success">5</span></h3>
<h4>Bạn có tin nhắn mới <span class="badge rounded-pill bg-warning">20+</span></h4>
<h5>Một số ví dụ khác <span class="badge rounded-pill bg-danger">HOT</span></h5>
</div>
</body>
</html>
Với file HTML trên, bạn sẽ có được các Badge như sau:
Badge đặt bên trong 1 đối tượng
Bạn có thể đặt Badge ở trạng thái hoạt động vào bên trong phần điều hướng của website hoặc 1 nút bất kỳ. Chỉ cần đặt nó bên cạnh link hoặc nút theo như ví dụ sau:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ví dụ về Bootstrap - Quản Trị Mạng</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Badge bên trong Nút</h2>
<button type="button" class="btn btn-primary">
Tin nhắn <span class="badge bg-danger">4</span>
</button>
<button type="button" class="btn btn-danger">
Thông báo <span class="badge bg-dark">7</span>
</button>
</div>
</body>
</html>
Kết quả sẽ có giao diện như sau:
Kết thúc bài này, chúng ta đã biết cách sử dụng Badge trong một số tình huống cơ bản. Hãy tiếp tục theo các bài học tiếp theo để nắm rõ hơn cách sử dụng Badge một cách nhuần nhuyễn hơn bạn nhé.
Bạn nên đọc
Theo Nghị định 147/2024/ND-CP, bạn cần xác thực tài khoản trước khi sử dụng tính năng này. Chúng tôi sẽ gửi mã xác thực qua SMS hoặc Zalo tới số điện thoại mà bạn nhập dưới đây:


Cũ vẫn chất
-
Các cách căn giữa ô trong bảng trên Word
Hôm qua 1 -
Cách khóa trang cá nhân Facebook không cho người lạ xem
Hôm qua 2 -
Cách tải và cập nhật driver Bluetooth cho Windows 10
Hôm qua -
Tổng hợp các cách bật Bluetooth trên Windows 10/8/7
Hôm qua -
Lệnh ALTER TABLE trong SQL Server
Hôm qua -
Khắc phục sự cố không thể chạy được file .exe
Hôm qua 4 -
6 phần mềm chỉnh sửa ảnh miễn phí tốt nhất trên máy tính
Hôm qua 3 -
Một số cách sửa lỗi Start Menu trên Windows 10 ngừng hoạt động
Hôm qua 5 -
Cách vô hiệu hóa Facebook nhưng vẫn dùng Messenger
Hôm qua -
8 bước khắc phục sự cố mất âm thanh trong Windows
Hôm qua 2