FullStack Academy

Badges trong Bootstrap 4

Chào các bạn, trong bài viết này chúng ta sẽ cùng nhau nghiên cứu các class badges trong bootstrap 4. Đây là một class có nhiều ứng dụng, trong đó tập trung vào tạo các thành phần cần nổi bật trên văn bản HTML. Ví dụ: notification number, review icon,  highlight trạng thái, highlight bài viết mới / cũ

Badge là gì?

Badge là các đối tượng hiển thị giống như các nhãn dán label, các tag, 1 hộp nhỏ chứa nội dung để người dùng chú ý. Ví dụ sau tiêu đề bài viết có 1 dòng chữ thông báo là bài viết mới, bên cạnh giỏ hàng hiển thị số lượng sản phẩm, …

Sử dụng lớp .badge sau đó là các class định dạng .badge-* như .badge-primary, .badge-secondary, … để tạo ra 1 Badge.Một vài lớp bổ xung như .badge-primary, .badge-secondary, .badge-danger,.. giúp tạo ra mầu nền của Badge, bạn có thể dụng chúng trong các ngữ cảnh phù hợp.

  • badge-primary
  • badge-secondary
  • badge-success
  • badge-danger
  • badge-warning
  • badge-info
  • badge-light
  • badge-dark
  • badge-link

Cách sử dụng thì thường các bạn sử dụng class .badge cho các phần tử hiển thị dạng inline như thẻ <a>, thẻ <span>, …

Mặc định, các Badge được thiết lập kích thước Font bằng 75% so với kích thước Font của phần tử cha.

Bootstrap 4 quy định CSS cho các class này như sau:

.badge {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
}
 
.badge:empty {
  display: none;
}
 
.btn .badge {
  position: relative;
  top: -1px;
}
 
.badge-primary {
  color: #fff;
  background-color: #007bff;
}
 
.badge-secondary {
  color: #fff;
  background-color: #6c757d;
}
 
.badge-success {
  color: #fff;
  background-color: #28a745;
}
 
.badge-info {
  color: #fff;
  background-color: #17a2b8;
}
 
.badge-warning {
  color: #212529;
  background-color: #ffc107;
}
 
.badge-danger {
  color: #fff;
  background-color: #dc3545;
}
 
.badge-light {
  color: #212529;
  background-color: #f8f9fa;
}
 
.badge-dark {
  color: #fff;
  background-color: #343a40;
}

Ví dụ Badge cơ bản

Sau đây, chúng ta cùng đi vào một vài đoạn code sử dụng class badge của bootstrap 4:


 

Badge Pill bo tròn

Nếu muốn các badge góc bo tròn hơn nữa thì thêm vào class .badge-pill

Bootstrap 4 quy định CSS cho class này như sau:

.badge-pill {
  padding-right: 0.6em;
  padding-left: 0.6em;
  border-radius: 10rem;
}



Badge cho phần tử link

Khi sử dụng .badge cho các link (phần tử <a> thì các link đó có hiệu ứng khi hover cho biết đang focus trên nó. Bootstrap 4 quy định CSS như sau:

.badge-primary[href]:hover, .badge-primary[href]:focus {
  color: #fff;
  text-decoration: none;
  background-color: #0062cc;
}
 
.badge-secondary[href]:hover, .badge-secondary[href]:focus {
  color: #fff;
  text-decoration: none;
  background-color: #545b62;
}
 
.badge-success[href]:hover, .badge-success[href]:focus {
  color: #fff;
  text-decoration: none;
  background-color: #1e7e34;
}
 
.badge-info[href]:hover, .badge-info[href]:focus {
  color: #fff;
  text-decoration: none;
  background-color: #117a8b;
}
 
.badge-warning[href]:hover, .badge-warning[href]:focus {
  color: #212529;
  text-decoration: none;
  background-color: #d39e00;
}
 
.badge-danger[href]:hover, .badge-danger[href]:focus {
  color: #fff;
  text-decoration: none;
  background-color: #bd2130;
}
 
.badge-light[href]:hover, .badge-light[href]:focus {
  color: #212529;
  text-decoration: none;
  background-color: #dae0e5;
}
 
.badge-dark[href]:hover, .badge-dark[href]:focus {
  color: #fff;
  text-decoration: none;
  background-color: #1d2124;
}



 

Kết luận

Như vậy chúng ta đã kết thúc bài học ở đây. Mình tin rằng các bạn đã hiểu và có thể sử dụng Badge trong Bootstrap 4 trong các dự án riêng của mình. Chúng ta sẽ gặp lại nhau trong bài học mới nhé.