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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Contoh Pembuatan Card di bootstrap</h2> <div class="card"> <div class="card-body">Ini adalah isi dari card</div> </div> </div> </body> </html> |
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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Contoh Pembuatan Card di bootstrap</h2> <div class="card"> <div class="card-header">Header</div> <div class="card-body">Isi dari content</div> <div class="card-footer">Footer</div> </div> </div> </body> </html> |
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 :
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 46 47 48 49 50 51 52 |
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Card dengan Contextual Classes</h2> <div class="card text-white"> <div class="card-header bg-primary">Ini adalah Header</div> <div class="card-body text-dark">Primary card</div> </div> <br> <div class="card text-white"> <div class="card-header bg-success">Ini adalah Header</div> <div class="card-body text-dark">Success card</div> </div> <br> <div class="card text-white"> <div class="card-header bg-info">Ini adalah Header</div> <div class="card-body text-dark">Info card</div> </div> <br> <div class="card text-white"> <div class="card-header bg-warning">Ini adalah Header</div> <div class="card-body text-dark">Warning card</div> </div> <br> <div class="card text-white"> <div class="card-header bg-danger">Ini adalah Header</div> <div class="card-body text-dark">Danger card</div> </div> <br> <div class="card text-white"> <div class="card-header bg-secondary">Ini adalah Header</div> <div class="card-body text-dark">Secondary card</div> </div> <br> <div class="card text-white"> <div class="card-header bg-dark">Ini adalah Header</div> <div class="card-body text-dark">Dark card</div> </div> <br> <div class="card text-dark"> <div class="card-header bg-light">Ini adalah Header</div> <div class="card-body text-dark">Light card</div> </div> </div> </body> </html> |
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 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Contoh Card dengan Image</h2> <hr/> <div class="card" style="width:400px"> <img class="card-img-top" src="img_avatar.png" alt="Card image" style="width:100%"> <div class="card-body"> <h4 class="card-title">Steven</h4> <p class="card-text">Steven adalah seorang Web Developer & Android Developer</p> <a href="#" class="btn btn-primary">Detail Info</a> </div> </div> <br> </div> </body> </html> |
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.
good lah
Terima kasih sudah berkunjung 😀
Artikel ini sangat membantu
kalau bkin biar ada shadownya gmna bang?
Coba kombinasikan dengan tutorial kita sebelumnya : https://www.warungbelajar.com/membuat-efek-bayangan-pada-text-dan-box.html
kalau di detail itu biar ngeflip cardnya gimana ya bang
coba mas, coba mas search dengan keyword : card flip bootstrap di google, banyak yang bahas mas