Bài 4. Nút, badge, alert và card

Một số khái niệm

Thành phần Bootstrap theo quy ước lớp gốc + lớp biến thể: btn + btn-primary + btn-lg; alert + alert-warning; card với các phần card-body, card-title, card-text, card-footer.

Nút

<div class="container">
  <div class="mb-2"><button class="btn btn-primary">Primary</button> <button class="btn btn-success">Success</button> <button class="btn btn-danger">Danger</button> <button class="btn btn-link">Link</button></div>
  <div class="mb-2"><button class="btn btn-outline-primary">Viền</button> <button class="btn btn-outline-success btn-sm">Nhỏ</button> <button class="btn btn-warning btn-lg">Lớn</button> <button class="btn btn-secondary" disabled>Vô hiệu</button></div>
  <div class="btn-group mb-2"><button class="btn btn-outline-dark">Ngày</button><button class="btn btn-outline-dark active">Tuần</button><button class="btn btn-outline-dark">Tháng</button></div>
  <div><button class="btn btn-success"><i class="bi bi-download"></i> Tải xuống</button> <button class="btn btn-primary" type="button" disabled><span class="spinner-border spinner-border-sm"></span> Đang lưu...</button></div>
  <div class="d-grid gap-2 mt-2"><button class="btn btn-dark">Nút rộng hết hàng (d-grid)</button></div>
</div>

Badge và alert

<div class="container">
  <h5>Tin nhắn <span class="badge bg-danger rounded-pill">4</span></h5>
  <div class="alert alert-success"><i class="bi bi-check-circle"></i> Đã lưu bài làm thành công.</div>
  <div class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong>Lưu ý!</strong> Hạn nộp bài còn 2 ngày.
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Đóng"></button>
  </div>
</div>

Nút đóng hoạt động nhờ tệp JS bundle và thuộc tính data-bs-dismiss="alert", không cần viết JavaScript.

Card và lưới card

<div class="container">
  <div class="row row-cols-1 row-cols-sm-3 g-3">
    <div class="col"><div class="card h-100 shadow-sm">
      <img src="https://picsum.photos/seed/c1/400/220" class="card-img-top" alt="">
      <div class="card-body"><span class="badge text-bg-success mb-2">Cơ bản</span><h6 class="card-title">HTML và CSS</h6><p class="card-text small text-body-secondary">Dựng trang web đầu tiên.</p></div>
      <div class="card-footer bg-transparent d-flex justify-content-between align-items-center"><small>22 bài</small><a href="#" class="btn btn-sm btn-success">Học</a></div></div></div>
    <div class="col"><div class="card h-100 shadow-sm border-primary">
      <img src="https://picsum.photos/seed/c2/400/220" class="card-img-top" alt="">
      <div class="card-body"><span class="badge text-bg-primary mb-2">Phổ biến</span><h6 class="card-title">Bootstrap 5</h6><p class="card-text small text-body-secondary">Giao diện nhanh, responsive, có sẵn thành phần.</p></div>
      <div class="card-footer bg-transparent d-flex justify-content-between align-items-center"><small>12 bài</small><a href="#" class="btn btn-sm btn-primary">Học</a></div></div></div>
    <div class="col"><div class="card h-100 shadow-sm">
      <img src="https://picsum.photos/seed/c3/400/220" class="card-img-top" alt="">
      <div class="card-body"><span class="badge text-bg-info mb-2">Mới</span><h6 class="card-title">Tailwind CSS</h6><p class="card-text small text-body-secondary">Thiết kế bằng lớp tiện ích.</p></div>
      <div class="card-footer bg-transparent d-flex justify-content-between align-items-center"><small>12 bài</small><a href="#" class="btn btn-sm btn-success">Học</a></div></div></div>
  </div>
</div>

h-100 trên card giúp các thẻ cùng hàng cao bằng nhau; card-footer luôn nằm đáy.