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.
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="card">
<div class="card-header">
Tutorial Bootstrap4
</div>
<div class="card-body">
Selamat datang di tutorial bootstrap4lengkap dari paling dasar sampai mahir,untuk pemula sampai expert.
</div>
<div class="card-footer">
www.malasngoding.com
</div>
</div>
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<div class="card bg-primary text-white">
<div class="card-header">
Tutorial Bootstrap4
</div>
<div class="card-body">
Selamat datang di tutorial bootstrap4lengkap dari paling dasar sampai mahir,untuk pemula sampai expert.
</div>
<div class="card-footer">
www.malasngoding.com
</div>
</div>
<br/>
<div class="card">
<div class="card-header bg-danger text-white">
Tutorial Bootstrap4
</div>
<div class="card-body bg-secondary text-white">
Selamat datang di tutorial bootstrap4lengkap dari paling dasar sampai mahir,untuk pemula sampai expert.
</div>
<div class="card-footer bg-success text-white">
www.malasngoding.com
</div>
</div>
<br/>
<div class="card border-danger">
<div class="card-header">
Tutorial Bootstrap4
</div>
<div class="card-body ">
Selamat datang di tutorial bootstrap4lengkap dari paling dasar sampai mahir,untuk pemula sampai expert.
</div>
<div class="card-footer">
www.malasngoding.com
</div>
</div>
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.
Jika teman-teman perhatikan pada contoh card di atas, kita membuat elemen <img> untuk menampilkan gambar, letaknya dalam class .card. kemudian kita beri class .card-img-top pada elemen gambar tersebut.
Jika kita jalankan, maka hasilnya akan seperti berikut.
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.
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.
<pclass="card-text">This isawider card with supporting text below asanatural lead-in to additional content.This card has even longer content than the first to show that equal height action.</p>
<pclass="card-text">This isawider card with supporting text below asanatural lead-in to additional content.This card has even longer content than the first to show that equal height action.</p>
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.
<pclass="card-text">This isawider card with supporting text below asanatural lead-in to additional content.This card has even longer content than the first to show that equal height action.</p>
<pclass="card-text">This isawider card with supporting text below asanatural lead-in to additional content.This card has even longer content than the first to show that equal height action.</p>
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 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.
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
Diki Alfarabi Hadi
Coding enthusiast.
Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.
Border Bootstrap 4 -Setelah sebelumnya dari tutorial bootstrap 4 bagian 1 sampai bagian 34, sudah dijelaskan tentang dasar-dasar dari bootstrap. Mulai dari pengenalan apa itu ...
Tooltips Bootstrap 4 – Selamat datang kembali di tutorial lengkap bootstrap 4 step by step untuk pemula sampai mahir di www.malasngoding.com. Setelah pada tutorial sebelumnya ...
Toasts Bootstrap 4 – Setelah sebelumnya pada tutorial bootstrap dasar untuk pemula, Dibahas tentang spinners bootstrap 4, maka pada tutorial ini akan dibahas lanjutannya, yaitu ...
Spinners Bootstrap 4 – Selamat datang kembali di seri tutorial bootstrap 4 dasar untuk pemula. setelah sebelumnya kita belajar tentang komponen scrollspy bootstrap, Untuk melanjutkan ...
Download Ebook belajar HTML & CSS dasar untuk pemula gratis.
Ebook ini bisa di download oleh teman-teman yang baru mulai belajar HTML dan CSS dasar tapi tidak tahu mau memulai belajar dari mana.
materi pembelajaran sudah di susun secara sistematis dan di dukung contoh gambar.
Cara membuat card yang isi icon disampingnya gmn gan?