Card trong Bootstrap 4

Card trong bootstrap 4 chưa hề có trong Bootstrap 3 và thường được sử dụng khi làm những khối giao diện có cả ảnh, tiêu đề, tiêu đề phụ và nội dung mô tả. Vì thế bootstrap card khá thuận tiện trong một vài trường hợp xử lý. Giờ chúng ta hãy cùng nhau thử nghiệm class mới này nhé.

Sử dụng Bootstrap Card

Các thành phần cơ bản cấu thành nên một Card:

  • Tạo thẻ <div> có class là card làm thẻ bao ngoài
  • Sử dụng class card-img-top với thẻ <img> để thêm ảnh vào phần đầu của card.
  • Thêm class card-body để định nghĩa phần body
  • Sử dụng card-title và card-subtitle để thêm tiêu đề và phụ đề
  • Sử dụng card-text với thẻ <p> để thêm nội dung


Như các bạn đã thấy, Card đang hiển thị trên toàn bộ <div> bao nó.

Nếu muốn lấy ảnh làm background và hiển thị chữ trên ảnh, các bạn chỉ cần đổi class card-body thành card-img-overlay.

Hoặc nếu muốn hiển thị thêm ảnh ở dưới title thì bạn chỉ cần thêm một thẻ <img> với class card-img-bottom.

Định nghĩa chiều rộng và chiều cao cho Bootstrap Card

Mặc định Card sẽ lấy tất cả chiều rộng có sẵn trong thẻ <div> bao chúng, chiều cao sẽ được điều chỉnh sao cho hiển thị phù hợp với nội dung của Card. Tuy nhiên, bạn cũng có thể tự thiết lập chiều rộng của chúng bằng cách thêm style width hay max-width và thay đổi chiều dài bằng cách thêm style height. Như ví dụ dưới đây:




Các bạn có để ý thấy là mình dùng đơn vị của width và height là rem thay vì px không? Mình viết vậy là bởi đơn vị rem có thể mở rộng được theo kích cỡ của màn hình, còn px thì không.

Thay vì fix chiều rộng và chiều cao như thế, các bạn cũng có thể sử dụng Bootstrap grid, mình thì hay dùng cách này:




Các bạn chỉ cần thêm thẻ <div> với class card-header và card-footer

Ví dụ:





Chúng ta có thể dễ dàng thêm link vào nội dung content bằng cách thêm thẻ <a> và class card-link.




Kết luận


Chúng ta đã học xong phần Bootstrap Card và giờ các bạn đã biết cách sử dụng class này rồi. Chúc các bạn học tốt và hẹn các bạn ở bài học tiếp theo.