Tutorial Bootstrap Part 16 : Membuat Card di Bootstrap

Assalamu'alaikum W. W.

Abdul Hafid Gunawan - Hai Sobat setia SC Blog, kali ini saya akan sharing tentang Tutorial membuat Card di Bootstrap.

PENGERTIAN

SleepingCodings - Card artinya Kartu, dimana Class Bootstrap yang satu ini sering di pakai dalam segala urusan & dalam semua website.

 

LATAR BELAKANG

Untuk mempersingkat waktu dalam pembuatan front-end website, yang mempunyai prioritas responsive & praktis.

MAKSUD DAN TUJUAN

- Mampu menguasai, memahami dan menggunakan Bootstrap untuk mengembangkan skill Front-end Website.

- Card sebagai modal utama untuk tampilan di Front-End .

ALAT DAN BAHAN

- Text Editor

PEMBAHASAN

1. BASIC CARD

Basic card dibuat dengan class .card dan kontennya menggunakan .card-body. Untuk lebih jelasnya lihat script ini :

2. FULL FITUR CARD

Untuk menambahkankan judul pada card gunakan class ,card-header dan untuk menambahkan footer tambahkan class .card-footer. Contoh :

3. MEMBUAT CARD

Class .card-image-top berfungsi menempatkan image diatas text dan bisa diganti dengan card-imag-bottom untuk meletakkan gambar dibawah text.

HASIL WEB BROWSER :

TAMBAHAN CARD TITLE & LINK

Gunakan class .card-title untuk menambahkan card title. Dan class .card-text digunakan untuk menghilangkan margin bawah untuk elemen. Class card-link berfungsi menambahkan warna biru untuk link, dan efek hover. Contoh :

KESIMPULAN

Menurut saya Ckass Bootstrap yang satu inilah yang sangat membantu saya, saya sering menggunakannya untuk membuat sebuah form input, dan masih banyak lagi.

REFERENSI

- www.w3schools.com/bootstrap4/bootstrap_cards.html

Wassalamu'alaikum W. W.