Di versi Bootstrap sebelumnya (terutama Bootstrap 3), komponen “Panel” digunakan untuk membungkus dan menampilkan konten terkait dalam sebuah kotak dengan border dan beberapa opsi styling. Namun, di Bootstrap 4 dan seterusnya, komponen Panel telah digantikan oleh komponen yang lebih fleksibel dan kaya fitur, yaitu Card.

Dalam tutorial ini, kita akan membahas cara menggunakan komponen Card Bootstrap untuk menampilkan konten terstruktur dalam proyek web Anda di Malang, Jawa Timur.

Dasar Penggunaan Card

Komponen Card menyediakan wadah fleksibel dan extendable untuk menampilkan berbagai jenis konten, seperti teks, gambar, daftar, tombol, dan lainnya. Struktur dasar sebuah Card terdiri dari beberapa bagian utama:

1. .card: Elemen kontainer utama untuk Card.
2. .card-body: Area padding untuk konten utama Card.
3. .card-title: Judul Card.
4. .card-subtitle: Subjudul Card (opsional).
5. .card-text: Teks utama Card.
6. .card-header: Header Card (biasanya untuk judul atau navigasi).
7. .card-footer: Footer Card (biasanya untuk informasi tambahan atau tombol aksi).
8. .card-img-top: Gambar yang ditempatkan di bagian atas Card.
9. .card-img-bottom: Gambar yang ditempatkan di bagian bawah Card.
10. .card-link: Link di dalam Card yang diberi gaya khusus.

Contoh Card Dasar

Berikut adalah contoh dasar penggunaan Card dengan judul, subjudul, dan teks:

Card dengan Header dan Footer

Anda dapat menambahkan header dan footer ke Card untuk informasi atau tindakan tambahan:

Card dengan Gambar

Anda dapat menambahkan gambar di bagian atas atau bawah Card menggunakan kelas .card-img-top atau .card-img-bottom. Pastikan gambar berada di dalam elemen .card.

Card dengan Gambar di Atas:

Card dengan Gambar sebagai Overlay:

Anda juga dapat menggunakan gambar sebagai latar belakang Card dengan kelas .card-img-overlay. Pastikan teks di atas overlay memiliki kontras yang cukup agar mudah dibaca.

Card dengan Link

Anda dapat menambahkan link ke dalam Card. Gunakan kelas .card-link pada tag <a> untuk memberikan gaya yang sesuai.

Layout Card (Card Groups, Grid, Columns)

Bootstrap menyediakan beberapa cara untuk mengatur layout Card:

• Card Groups (.card-group): Menampilkan beberapa Card berdampingan dengan lebar yang sama dan tanpa margin di antara mereka.
• Grid (.row dan .col-*): Menggunakan sistem grid Bootstrap untuk mengatur Card dalam baris dan kolom.
• Card Columns (.card-columns): Menampilkan Card dalam tata letak Masonry (bergaya bata) yang akan otomatis menyesuaikan posisi Card berdasarkan tinggi kontennya (perlu diperhatikan bahwa .card-columns telah dihilangkan di Bootstrap 5 dan disarankan untuk menggunakan Grid).

Contoh Card Group:

Contoh Card dalam Grid:

Komponen Card di Bootstrap sangat serbaguna dan dapat digunakan untuk berbagai keperluan, mulai dari menampilkan profil pengguna, ringkasan artikel, hingga produk dalam toko online Anda di Malang. Dengan berbagai opsi dan kemudahan kustomisasi, Card adalah pengganti yang sangat baik untuk Panel di versi Bootstrap yang lebih baru. Selamat mencoba dan berkreasi! 🚀