Tutorial Belajar Bootstrap 4 Part 15 – Membuat Card (Panel) dengan Bootstrap

Selamat datang di warung belajar, masih dalam seri belajar bootstrap 4, jika dalam tutorial sebelumnya kita telah membahas mengenai cara membuat list dengan bootstrap, dalam tutorial kali ini kita akan membahas cara membuat card (panel) dengan bootstrap.

Card adalah fitur yang diberikan di bootstrap 4 untuk membuat box yang memiliki border dan padding didalamnya, dalam card ini anda dapat mengatur bagian header, footer, content, warna dan pengaturan yang lain.

Jika dilihat dari kesamaan dari fitur di bootstrap 3, fitur card ini memiliki fungsi yang sama dengan panel di bootstrap 3, baik kita langsung mulai saja pembahasan mengenai card di bootstrap 4.

 

Cara Membuat Card di bootstrap 4

Untuk membuat card anda hanya perlu menambahkan beberapa class antara lain :

• tambahkan class .card didalam tag <div>
• didalam tag <div> buatlah tag <div> lagi dan tambahkan class .card-body untuk membuat bagian isi dari card tersebut

Untuk contoh skripnya adalah sebagai berikut :

Semisal kita simpan dengan nama basic_bootstrap.html, lalu dibuka di browser maka hasilnya adalah :

Keterangan :

• Card akan terbuat karena kita menambahkan class .card pada bagian tag <div>
• pada bagian isi dari card kita tambahkan class .card-body, dan menuliskan isi dari card diantara tag <div class=’card-body’></div>

 

 

Membuat header dan footer pada card

Untuk fitur card anda juga bisa menambahkan header dan footer, dengan menambahkan class .header (untuk membuat bagian header), dan class .footer (untuk membuat bagian footer), untuk contoh skripnya adalah sebagai berikut :

Semisal kita simpan dengan nama header_footer_card.html, lalu kita buka di browser maka hasilnya adalah seperti berikut ini :

Keterangan :

• pada bagian atas card terdapat header karena kita menambahkan class card-header
• pada bagian bawah card terdapat footer karena kita menambahkan class card-footer

 

 

Contextual class pada cards

Anda juga dapat menambahkan contextual class untuk merubah warna dari card, beberapa contextual class yang bisa anda gunakan adalah :

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

Untuk contoh penggunaan  contextual class pada card adalah sebagai berikut :

Semisal kita simpan dengan nama contextual_class.html, hasilnya adalah sebagai berikut :

Keterangan :

• Terlihat pada bagian masing – masing card memiliki warna yang berbeda, karena kita menambahkan contextual class yang diinginkan pada bagian card, dalam contoh card di atas kita menambahkan contextual pada bagian header, anda juga bisa menambahkan contextual class pada bagian body,footer atau bahkan pada keseluruan card.

 

 

Menambahkan Image pada card

Pada bagian card anda juga dapat menambahkan gambar, untuk contohnya seperti ini :

Semisal kita simpan dengan nama card_image.html, jika dibuka dibrowser maka hasilnya :

Keterangan :

• kita membuat card dengan ukuran 400 pixel, karena menyesuaikan dengan ukuran lebar dari gambarnya.
• sebelum bagian card body kita menambahkan gambar yang akan ditampilkan di bagian card, karena gambarnya berada diatas maka kita menambahkan class card-img-top, jika dibagian bawah anda bisa menambahkan class card-img-bottom
• setelah anda menambahkan gambarnya, baru kita isikan content dibawah gambar dengan mengisi di bagian class card-body

 

 

Baik sekian dulu teman – teman pembahasan mengenai cara membuat card dengan bootstrap 4, jika ada yang ingin didiskusikan silahkan di kolom komentar, sampai jumpa di seri tutorial bootstrap 4 selanjutnya.