Badge trong bootstrap 5

11/12
Thạch
Bootstrap 5
0
269

Bài viết này sẽ hướng dẫn bạn cách tạo badge (huy hiệu) trong Bootstrap. Badge tương tự như Label, có điều là các góc sẽ được làm tròn hơn.

Bài 11: Button Group trong Bootstrap 5
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 - Sinitc.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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 - Sinitc.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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 - Sinitc.com</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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ài 13: Progress Bars trong Bootstrap 5