Basic card
Sử dụng lớp .card để tạo ra Basic card, và nội dung bên trong card sử dụng lớp .card-body.
Ví dụ:
Header and Footer
Sử dụng lớp.card-header để tạo phần heading cho card và lớp .card-footer để tạo phần footer cho card.
Ví dụ:
Contextual Cards
Để thêm màu cho back-ground them các lớp sau ( .bg-primary , .bg-success ,.bg-info , .bg-warning , .bg-danger , .bg-secondary , .bg-dark và .bg-light .
Ví dụ:
Titles, text, and links
Sử dụng lớp card-title để tạo card titles cho phần heading. Lớp .card-text sử dụng để bỏ phần bottom margins trong thẻ a
element bên trong .card-body. Lớp.card-link sử dụng tạo màu xanh cho các phần tử và thêm hiệu ứng chuyển động.
Ví dụ:
Card Images
Sử dụng lớp.card-img-top hoặc lớp .card-img-bottom vào thuộc tính . Để điều chỉnh phần image trên hoặc dưới phần hộp card. Chú ý: Phải sử image ở ngoài lớp .card-body để có thể set được toàn bộ chiều rộng của ảnh.
Stretched Link
Thêm lớp .stretched-link đến một liên kết bên trong thẻ,và nó sẽ làm cho click chuột được trên các thẻ và hoverable (thẻ sẽ hoạt động như một liên kết).
Ví dụ:
Card Image Overlays
Để chèn ảnh layout với chữ ta sử dụng lớp .card-img-overlay để thêm phần chữ trên top phần ảnh.
Ví dụ:
Card Columns
Sử dụng lớp .card-columns để tạo ra hệ thống grid of cards. Phần layout sẽ tự điều chỉnh khi thêm nhiều card hơn.
Note: Các card này sẽ hiển thị theo chiều dọc trên các small device (<576px):
Ví dụ:
Card Deck
Sử dụng lớp.card-deck để tạo ra các tập hợp card có chiều rộng và chiều cao giống nhau và tách rời nhau.
Cách bố trí này sẽ tự động điều chỉnh khi bạn chèn thêm thẻ.
Ví dụ:
Card Group
Lớp.card-group tương tự như lớp .card-deck.Điểm khác biệt duy nhất là lớp .card-group sẽ bỏ đi phần margin – phần khách cách giữa các thẻ
Note: : Các card này sẽ hiển thị theo chiều dọc trên các small device (<576px).
Ví dụ:
