Membuat Card Menu pada HTML Dengan Bootstrap 4

Cara Membuat Card Menu pada HTML Dengan Bootstrap 4 – hai sobat blogger ketemu lagi dengan saya dewankomputer dan pada kesempatan kali ini saya akan memposting tentang bootstrap lagi yaitu cara membuat menu card. Card menu ini wajib dipelajari jika sobat ingin membuat suatu website karena sekarang pasti setiap website mempunyai menu yang berbentuk card seperti pada blog, website company, terlebih lagi e-commerceyang menampilkan produknya pada beranda pasti menggunakan tampilan Card. Untuk membuatnya tentunya sangat mudah loh sobat tidak perlu membuat css dan lain-lainnya. Sobat hanya perlu memanggil nama classnya saja.

Artikel Tentang Bootstrap Lainnya :

Mempercantik Button pada HTML dengan Bootsrap 4 dengan Mudah

Macam-macam Form Input pada HTML dan Bootstrap

Cara Membuat SweetAlert dan Macam-Macamnya pada PHP

Membuat Bootstrap Modal dan Animasinya pada PHP

Membuat Badges Menggunakan Bootstrap 4

Membuat Alert pada HTML menggunakan Bootstrap 4

Mengenal Bootstrap Typography pada HTML dan Bootstrap 4

Menggunakan Tooltip pada HTML dan Bootstrap 4

 

Langsung saja tidak usah bertele-tele karena ada banyak jenis card nanti yang akan dibahas. Caranya tinggal sobat ikuti contoh-contoh dibawah.

1. Card Standar

Untuk penggunaan card yang standar ini hanya class body saja. Berikut adalah contoh penggunaannya :

Hasilnya :

2. Card Dengan Header & Button

Untuk card jenis ini ada sedikit tambahan yaitu kita menambahkan header dan button pada bodynya. Contoh penggunaannya adalah sebagai berikut :

Hasilnya :

3. Card dengan Judul, Teks, Link

Berbeda dengan card diatas yang menggunakan header, card ini kita hanya mengisinya pada body dengan Judul, Subjudul, Teks dan Link. Contoh penggunaanya adalah sebagai berikut :

Hasilnya :

4. Card dengan Header dan Footer

Mirip dengan Card nomor 2, kali ini kita akan membuat card dengan tambahan footer. Cara penggunaannya seperti contoh berikut

Hasilnya :

5. Card Dengan Gambar

Card ini adalah yang paling sering diguakan jika kita membuat blog/toko online. Berikut adalah cara membuat card dengan gambar

Hasilnya :

6. Card dengan gambar dan list

Berbeda dengan contoh sebelumnya, pada card jenis ini kite membuatnya menggunakan gambar dan list. Tentunya card jenis ini juga bisa dipadukan dengan footer atau link. Cara penggunaannya adalah sebagai berikut

Hasilnya :

7. Card Listgroup

Card ini berisi list group dan tentunya kita bisa menyatukannya dengan header dan footer, cara penggunaannya adalah sebagai berikut

Hasilnya :

8. Card dengan Aligment

Tidak hanya paragraf, pada card kita juga bisa menambahkannya dengan text aligment. Contoh penggunaannya adalah sebagai berikut :

Hasilnya :

9. Card dengan Blackquote + Aligment

Kita bisa menggabungkan card ini dengan blackquote dan aligment, cara penggunaannya adalah sebagai berikut

Hasilnya :

10. Card Navigation

Card juga bisa digabungkan dengan navigasi dan juga dengan icon. ika sobat ingin menambahkannya dengan icon maka sobat juga harus memasukkan librari css dari fontawesome atau lainnya. Jika pada contoh ini seperti yang dicontohkan diatas kita menggunakan fontawesome. Tentunya jika sobat tidak memasukkan librari ini maka tidak akan muncul iconnya. Berikut adalah cara penggunaannya :

Maka hasilnya :

11. Card dengan Gambar Bawah

Selain dengan gambar diatas, kita juga bisa meletakkan gambarnya dibawah. Cara penggunaannya adalah sebagai berikut :

Hasilnya :

12. Card Image Horizontal

Selain kita bisa membuat card dengan gambar diatas dan gambar dibawah, kita juga bisa membuat horisontal. Kita juga bisa meletakkan gambar dikanan ataupun dikiri. Berikut adalah contoh penggunaannya :

Hasilnya :

13. Card Styles

Seperti elemen bootstrap lainnya, kita juga bisa memberikan style atau warna standar bawaan bootstrap pada card. Contoh penggunaannya adalah sebagai berikut :

Hasilnya :

14. Card Border

Selain kita bisa memberikan warna, kita juga bisa merubah warna bordernya. Cara penggunaannya adalah sebagai berikut :

Hasilnya :

15. Card Mixing

Kita bisa mengubah/menggabungkan card style/card border, selain itu kita juga bisa menjadikan gambar sebagai background card dan ada teks diatasnya atau image overlay. Contoh penggunaannya adalah sebagai berikut :

Hasilnya :

16. Card group

Jik kita menggunakan card biasa dan jika judulnya mempunyai panjang yang berbeda-beda maka height/tinggi dari card tersebut akan berbeda-beda juga. Oleh karena itu jika sobat ingin membuat tinggi card sama semua setiap baris/rownya maka sobat bisa menggunakan card jenis ini. Cara menyamakan tinggi card adalah sebagai berikut :

Hasilnya :

17. Card Deck

Selain card group, agar bisa menyamakan tinggi kolomnya sobat juga bisa menggunakan dengan contoh berikut

Hasilnya :

Untuk membuat card menjadi dua, tiga, empat atau lima bahkan lebih jumlah card per kolomnya, sobat tinggal tambahkan tag <div class=”card”>…</div> diantara tag <div class=”col-sm-12″>…</div>.

 

Sobat bisa menggabungkan card ini dengan elemen bootstrap lainnya sesuai kreasi sobat. Tentunya setiap orang mempunyai kreasi yang berbeda-beda. Sekian postingan saya tentang Membuat Card Menu pada HTML Dengan Bootstrap 4. Jika ada pertanyaan atau masih bingung maka sobat bisa tinggalkan pertanyaan pada kolom komentar dibawah. Mohon maaf jika ada salah-salah kata.

Baca juga :

Cara Menampilkan Data Pada Card Dinamis dari Database MySQL pada PHP

 

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..

One thought on “Membuat Card Menu pada HTML Dengan Bootstrap 4

Leave a Reply

Your email address will not be published. Required fields are marked *

1 × 5 =