Menampilkan data dari database ke card bootstrap

Card Bootstrap 4 – Selamat datang kembali di seri tutorial bootstrap 4 dari dasar sampai mahir untuk pemula.

Pada tutorial bootstrap 4 bagian ke 16 ini kita akan belajar mengenal sebuah komponen lagi dari bootstrap 4. yaitu komponen card.

Apa itu komponen card? dan apa kegunaannya? serta bagian mana di sebuah website card diterapkan?

Yuk simak penjelasan tentang cards bootstrap 4 berikut.

Card Bootstrap 4

Komponen card adalah komponen yang menggantikan komponen panel dari versi bootstrap sebelumnya.

Semenjak bootstrap merilis bootstrap versi 4, komponen panel tidak lagi tersedia. dan digantikan dengan sebuah komponen yang bernama card yang akan kita bahas pada tutorial bootstrap 4 kali ini.

Biasanya card digunakan untuk membuat komponen

Card memiliki tiga bagian di dalam nya, yaitu bagian header, body dan footer. pada bagian header card biasanya dituliskan dari judul konten yang berkaitan, pada bagian body card biasanya dituliskan isi dari konten yang ingin ditampilkan, pada bagian footer card biasanya dituliskan keterangan lebih lanjut atau bisa juga dibuat tombol.

Seperti tutorial-tutorial bootstrap 4 sebelumnya yang sudah kita bahas, pastikan teman-teman sudah membaca tutorial bootstrap 4 yang bertama, atau tentang cara menghubungkan dan mengunakan bootstrap.

Oke, lanjut ..

Cara Membuat Card Dengan Bootstrap 4

Untuk membuat card bootstrap, kita bisa menggunakan class .card. kemudian didalamnya diikuti dengan class .card-header jika ingin membuat bagian header pada card. .card-body untuk membuat bagian body card, dan .card-footer untuk membuat footer card.

Kita mulai dengan membuat contoh card paling sederhana, card yang akan kita buat adalah jenis card yang standar, yang memiliki header, body dan footer. agar teman-teman bisa melihat contohnya.

Perhatikan cara membuat card berikut.

Pada contoh card sederhana di atas kita membuat card header dengan bertuliskan “Tutorial Bootstrap 4”. seterusnya sampai bagian body dan footer bisa teman-teman lihat pada syntax di atas.

Jika dijalankan pada browser, maka hasilnya seperti berikut.

card bootstrap 4

Gambar di atas adalah contoh card yang paling sederhana yang kita buat. dimana terdapat bagian header, body dan footer pada komponen card tersebut.

Lalu bisakah kita modifikasi tampilannya? agar lebih menarik dan modern, tentu saja bisa. perhatikan contoh dan penjelasan lebih lanjut berikut.

Mewarnai Card Bootstrap

Untuk memberikan warna background pada card, kita bisa gunakan class berikut:

• .bg-primary
• .bg-secondary
• .bg-danger
• .bg-warning
• .bg-success
• .bg-info
• .bg-dark
• .bg-light

Tentu teman-teman tidak asing lagi dengan class-class di atas jika sudah membaca juga tutorial bootstrap sebelumnya di malasngoding.com, yaitu tentang badge dan button bootstrap 4.

Class-class tersebut tinggal kita terapkan pada card seperti contoh berikut.

Jika kita jalankan, maka hasilnya akan seperti berikut.

merubah warna card

Seperti yang terlihat pada gambar di atas, warna card berubah sesuai dengan contoh syntax yang kita buat di atas tadi.

Kita bisa hanya mengubah warna header nya saja, body atau footer nya saja.

Pada contoh di atas juga kita mencoba mengubah warna garis atau border pada card menggunakan class .border-*, untuk mengubah warna garis, kita bisa gunakan class berikut.

• .border-primary
• .border-secondry
• .border-warning
• .border-danger
• .border-success
• .border-info
• .border-dark
• .border-light

Penggunaan bootstrap bersifat bebas, bebas dalam artian kita bisa merubah dan mengkombinasikan komponen-komponen bootstrap sesuai keinginan kita.

Perhatikan lagi contoh card-card yang akan kita buat berikut.

Card Yang Menggunakan Gambar

Jika teman-teman membaca panduan penggunaan bootstrap, bootstrap juga menyediakan jenis card yang menggunakan gambar.

Baik, akan kita bahas dan buat contohnya di sini.

Apa sih kegunaan card yang memiliki gambar? jenis card ini bisa kita gunakan untuk membuat tampilan artikel pada blog atau website.

Untuk membuat card yang menampilkan gambar, pastikan teman-teman sudah menyediakan file gambar yang akan digunakan sebagai gambar yang akan ditampilkan pada card. di sini saya sudah menyediakan file gambar yang sudah saya letakkan pada direktori file proyek bootstrap.

Baca juga :

• Cara menampilkan gambar dengan HTML

Perhatikan contoh berikut.

Jika teman-teman perhatikan pada contoh card di atas, kita membuat elemen

card bergambar bootstrap 4

Card di atas masih berukuran besar, untuk memperkecil atau mengubah ukuran nya agar tetap responsive akan kita pelajari pada judul selanjutnya.

Jika teman-teman ingin letak gambarnya ada di bagian bawah, teman-teman tinggal pindahkan ke bawah seperti contoh berikut.

Card Vertikal

Berikut contoh membuat card yang berbentuk vertikal.

Dan hasilnya.

card vertikal bootstrap 4

Layout Card

Pada contoh card ini kita akan sedikit mendekati tampilan website. kita ambil contoh dengan membuat halaman untuk menampilkan daftar posting artikel pada sebuah website.

Daftar postingan artikel yang akan kita buat akan menggunakan card.

Card Group

Selain pada tombol, card juga bisa di group, perhatikan cara membuat group card berikut.

Dan hasilnya seperti berikut.

card group bootstrap 4

Caranya sangat mudah, buat sebuah elemen

selanjutnya di dalam elemen div .card-group tersebut, isi dengan card-card seperti yang sudah dipelajari sebelumnya.

Card Decks

Tampilan Card Decks hampir sama dengan card-group, jika card pada card-group berdempetan, maka sebaliknya pada card decks.

dan hasilnya.

card decks bootstrap 4

Cara penggunaannya pun sangat mudah, hampir sama dengan card group, hanya saja di sini kita menggunakan class .card-deck seperti pada contoh di atas.

Card Columns

Card Column akan membuat tampilan card mengikuti tinggi dari card sebelumnya, dan tampilan card nya berdempetan ke atas. karena card colum mirip seperti masonry.

Cara penggunaannya pun cukup mudah, ganti class .card-group atau .card-deck yang sebelumnya kita buat menjadi .card-columns.

Jika dijalankan, maka tampilan card akan seperti berikut.

card columns masonry bootstrap 4

Card Grid

Pada sub judul layout ini kita akan belajar tentang menerapkan card pada grid sistem bootstrap. untuk membuat tampilan yang responsive.

Penggunaan grid pada card ini dibuat dengan tujuan agar teman-teman juga bisa lebih memahami kegunaan dari grid sistem bootstrap.

Karena grid sistem sangat berguna untuk ke depannya pada saat membuat template website yang responsive.

Wajib Sudah Baca :

• Tutorial Bootstrap 4 #4 : Grid System Bootstrap 4

Kenapa kita menggunakan grid system bootstrap? karena untuk contoh ini kita akan mencoba menerapkan card pada grid system bootstrap untuk membuat tampilan postingan website yang memiliki 3 atau 4 kolum.

Perhatikan contoh berikut.

Perhatikan pada contoh di atas, seperti yang sudah dijelaskan pada tutoiral grid system bootstrap, untuk menggunakan class grid, class grid bootstrap kita letakkan di dalam elemen class .row.

Kemudian di dalam class .row, baru kita letakkan card yang sudah kita buat seperti pada contoh-contoh sebelumnya.

Kemudian jika teman-teman perhatikan pada contoh card yang pertama, kita memberikan class col-md-4 dan col-sm-12, dengan tujuan agar ketika halaman diakses pada layar berukuran layar laptop, card akan berukutan 4 grid [col-md-4], dan kita ingin ketika diakses dari layar yang berukuran layar smartphone, maka card akan ditampilkan sebesar 12 grid [col-sm-12].

Sedangkan pada card kedua dan ketiga, kita membuat agar jika diakses dari smartphone, ukurannya menjadi 6 grid [col-sm-6].

Sedikit pengingat bahwa grid pada bootstrap ada 12. jadi untuk ukurannya bisa teman-teman sesuaikan sesuai keinginan.

Sekarang coba jalankan pada browser, maka hasilnya akan seperti berikut.

Berikut contoh tampilan card saat diakses dari laptop.

card responsive jika diakses dari laptop

Dan berikut tampilan card saat diakses dari smartphone.

card responsive jika diakses dari smartphone

Oke, Sekian Tutorial Bootstrap 4 #16 : Card Bootstrap 4.

Pada tutorial bootstrap 4 selanjutnya kita akan membahas komponen-komponen lainnya yang sudah disediakan di bootstrap 4.

Untuk download source code dan melihat demo hasilnya bisa teman-teman lihat pada link berikut.

Download Source Code

Demo

Incoming search terms:

• macam macam card bootstrap
• cara membuat gambar agar ukurannya tetap bootstrap
• card tempalte bootstrap
• mengatur tampilan form boostrep
• card bootstrap
• card bootstrap tutorial
• card bootstrap 4 malasngoding
• Macam div class card warna
• img src pada body
• card footer malasngoding