Breaking

Tuesday, October 17, 2017

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.

No comments:

Post a Comment