Cara Membuat Card di Bootstrap 4
Pada Bootstrap 4, Card atau Kartu adalah kotak yang memiliki garis tepi (Border) dan Padding disekitar konten serta dapat terdiri dari Header, Footer, Konten, Warna, dll. Berikut adalah contoh tampilannya:
Yasya El Hakim
![Cara Membuat Card di Bootstrap 4 Cara Membuat Card di Bootstrap 4](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY7WZMFFuMC_fjDVZElWHwv5E1kwjlLrIOrnclWU9CBiXJF36e_AOjgRPKocIZjxbWK7bLN6zAjXLqzMTYJ2ShJN_-b8Uu3qDI9v-xvlK5WtXA-CckghR29eqgH43AhzI98ZhNkDXVS7Sa/s1600/Screenshot_2020-02-16+Thumbnail+Generator+EL+Creative+Academy.png)
Pada Bootstrap 4, Card atau Kartu adalah kotak yang memiliki garis tepi (Border) dan Padding disekitar konten serta dapat terdiri dari Header, Footer, Konten, Warna, dll. Berikut adalah contoh tampilannya:
![Card Card](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje0Uqxwy_Xi590pkjdxHYtjiXRgADpt0TLH6nDNNmE5RG2j27qR059CVSmAjykZv0IranmEZdIo64Bhn9sREi9fxmRUS4BTc10spyqlxlNaX0_-MHqH-Hvu6xHR4FMafHOl_1qPd4tN9hC/s1600/Screenshot_2020-02-16+Bootstrap+4+Cards.png)
Cara Membuat Card
Cara dasar untuk membuat Card pada Bootstrap 4 adalah dengan menggunakan class .card dan konten di dalamnya harus memiliki class .card-body. Contoh:![Cara Membuat Card Cara Membuat Card](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj78mH0dah91iPQIXcHd4HJLw1qS4vsBO4cd7tTfLjWN75Ch56eBPpNns1Igmht5Rv4q60jZUAopGZaM5BnVR6XFB6pN6UKrc6EaPJRwukNljq3PBAmVsi6OxQfES4MDUtKCq3jIVXbZqVA/s1600/Screenshot_2020-02-16+Bootstrap+4+Cards%25281%2529.png)
<div class="card">
<div class="card-body">Contoh Card Dasar</div>
</div>
Header dan Footer Card
Untuk membuat Heading pada Card, kita dapat menggunakan class .card-header. Sedangkan untuk Footer, kita dapat menggunakan class .card-footer. Contoh:![Header dan Footer Card Header dan Footer Card](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHcEplhRCm8mjhNqMvUrJaqR6MP2X3fuEvt7SwkPRyqcOaEzkB0wdbmF5ZT1t_v4usTBZ7pwu_CGynWWMTLoNRzQdrdl1K_NmYmKGTv7yaDqJ7VapVLuZzNlR5yovU8PAP5Jjn5Qee9iSS/s1600/Screenshot_2020-02-16+Bootstrap+4+Cards%25282%2529.png)
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Konten</div>
<div class="card-footer">Footer</div>
</div>
Menambahkan Class Konteks pada Card
Kita juga dapat menambahkan warna Background pada Card dengan menggunakan Contextual Class (Class Konteks) seperti .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark dan .bg-light. Contoh:![Menambahkan Class Konteks pada Card Menambahkan Class Konteks pada Card](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAxxpHCFOF9FaCd-gu4J6BjoCCQk0d4CqIP7CFLg7n8cIYZV7ZxycggzEUskMa36H0IsX9W2XoQiYMciMJCcXA4Ny1twH0xAuOUbJuzCcmI8buC0PrPKcl9mUjHFBCwBkoRVyS42-V4lQ0/s1600/Screenshot_2020-02-16+Bootstrap+4+Cards%25283%2529.png)
<div class="card">
<div class="card-body">Basic card</div>
</div>
<br>
<div class="card bg-primary text-white">
<div class="card-body">Primary card</div>
</div>
<br>
<div class="card bg-success text-white">
<div class="card-body">Success card</div>
</div>
<br>
<div class="card bg-info text-white">
<div class="card-body">Info card</div>
</div>
<br>
<div class="card bg-warning text-white">
<div class="card-body">Warning card</div>
</div>
<br>
<div class="card bg-danger text-white">
<div class="card-body">Danger card</div>
</div>
<br>
<div class="card bg-secondary text-white">
<div class="card-body">Secondary card</div>
</div>
<br>
<div class="card bg-dark text-white">
<div class="card-body">Dark card</div>
</div>
<br>
<div class="card bg-light text-dark">
<div class="card-body">Light card</div>
</div>
Menambahkan Judul, Teks, dan Link pada Card
Kita dapat menggunakan class .card-title untuk membuat judul Card pada semua elemen Heading. Untuk menghapus margin-bottom (Margin Bawah) pada elemen <p>, kita dapat menggunakan class .card-text jika elemen tersebut berada di dalam elemen yang memiliki class .card-body dan cuma ada satu. Selain itu, kita dapat menggunakan class .card-link untuk membuat Link menjadi berwarna biru dan memiliki efek Hover. Berikut adalah contohnya:![Menambahkan Judul, Teks, dan Link pada Card Menambahkan Judul, Teks, dan Link pada Card](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFx9m3Lz14NnEUqiqKEfDmV85L9aVnC84S-ys7NwkIb0tliOAnlrScKqdcfS4ioWcw3E0fzy2QAOvUkIGSR_fg2AMr6VwYRXO4jF2Ml5bOJ40SzPs_EEv1dc_1V-GDethhZ2A9h8TiBGqz/s1600/Screenshot_2020-02-16+Bootstrap+4+Cards%25284%2529.png)
<div class="card">
<div class="card-body">
<h4 class="card-title">Judul Card</h4>
<p class="card-text">Contoh Teks, contoh teks.</p>
<a href="#" class="card-link">Link 1</a>
<a href="#" class="card-link">Link 2</a>
</div>
</div>
Menambahkan Gambar pada Card
Untuk memasukkan gambar pada card, kita dapat menggunakan class .card-img-top (Gambar diatas) atau .card-img-bottom (Gambar dibawah) pada elemen <img>. Contoh:![Menambahkan Gambar pada Card Menambahkan Gambar pada Card](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDKVZZyqzg_FrTNK9q_13hxeO9qm8fPSjzNBIgFsXyWDh4X8u2gQOihwrTlwo4B984A95XqRANY6m5R9p4dj3CLDRcXWz0BkZwe2MO0kFWX7-NwmzeQukXylVMOGufnZszIHjZRynjAHTE/s1600/Screenshot_2020-02-16+Bootstrap+4+Cards%25285%2529.png)
<p>Gambar diatas (card-img-top):</p>
<div class="card" style="width:400px">
<img class="card-img-top" src="avatar.png" alt="Card image" style="width:100%">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Contoh Teks, contoh teks. John Doe adalah seorang Pria. </p>
<a href="#" class="btn btn-primary">Lihat Profil</a>
</div>
</div>
<br>
<p>Gambar dibawah (card-img-bottom):</p>
<div class="card" style="width:400px">
<div class="card-body">
<h4 class="card-title">Jane Doe</h4>
<p class="card-text">Contoh Teks, contoh teks. Jane Doe adalah seorang Wanita.</p>
<a href="#" class="btn btn-primary">Lihat Profil</a>
</div>
<img class="card-img-bottom" src="avatar.png" alt="Card image" style="width:100%">
</div>
Membuat Card dengan Stretched Link
Untuk membuat Stretched Link pada Card - yang dapat membuat seluruh Card dapat di klik dan di Hover (Sama seperti Link), kita dapat menggunakan class .stretched-link. Contoh:
<a href="#" class="btn btn-primary stretched-link">Lihat Profil</a>
Membuat Gambar Overlay pada Card
Untuk membuat gambar menjadi terlihat seperti Background serta menjadikan Teks berada di depan gambar, kita dapat menggunakan class .card-img-overlay. Contoh:![Membuat Gambar Overlay pada Card Membuat Gambar Overlay pada Card](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmQ37NnqaSGTNfATANzGUJ0Afx9Bojbl5Lu1PIJLzxFzKEY6Nqf9vQMOyWlLbGWgXMnVNDr6hVkLKPsqfeAPnPhSDn7nME_oi_BFracEDrkrw__rC1q5Kk8FKhOUNuR2Hoh1KteNRmA79S/s1600/Screenshot_2020-02-16+Bootstrap+4+Cards%25286%2529.png)
<div class="card img-fluid" style="width:500px">
<img class="card-img-top" src="avatar.png" alt="Card image" style="width:100%">
<div class="card-img-overlay">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Contoh teks Contoh teks Contoh teks Contoh teks Contoh teks Contoh teks Contoh teks Contoh teks Contoh teks Contoh teks.</p>
<a href="#" class="btn btn-primary">Lihat Profil</a>
</div>
</div>
Membuat Kolom pada Card
Kita dapat menggunakan class .card-columns untuk membuat tampilan Grid (Masonry Grid) mirip seperti Pinterest. Dengan menggunakan class tersebut, Layout akan teratur secara otomatis ketika kita menambahkan Card lagi. Contoh:![Mengatur Kolom pada Card Mengatur Kolom pada Card](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrPyO480ifRzwLu_BoLKAiHgLIkImw53VBdOnQuScTRgXglL45u3oRC6yPwrtoWCkn0GMyw0P25hfQ-l91-I1_xQmH7v4FS6JxC22pDk7PFps9W-7m5BiT38LgDvNwjAXTuIIKeieEtVHd/s1600/Screenshot_2020-02-16+Bootstrap+4+Cards%25287%2529.png)
<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Contoh teks, contoh teks.</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">Contoh teks, contoh teks.</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">Contoh teks, contoh teks.</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Contoh teks, contoh teks.</p>
</div>
</div>
<div class="card bg-light">
<div class="card-body text-center">
<p class="card-text">Contoh teks, contoh teks.</p>
</div>
</div>
<div class="card bg-info">
<div class="card-body text-center">
<p class="card-text">Contoh teks, contoh teks.</p>
</div>
</div>
</div>
Catatan: Jika ukuran layar kurang dari 576px, maka tampilan Card akan tersusun secara Vertikal.
Membut Card Deck pada Bootstrap
Kita dapat membuat Card Deck pada Bootstrap - yaitu membuat tampilan Grid yang sama lebar dan sama tinggi, dengan menggunakan class .card-deck. Layout akan teratur secara otomatis ketika kita menambahkan Card lagi. Contoh:![Membut Card Deck pada Bootstrap Membut Card Deck pada Bootstrap](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv1v_anM0VnVU6sVkB2ym0WZoVFyaljfPcsxsCCcxcQTgKGZNpaSJozrDiQ6fnF0_0WfCcpXAbPUdFUrw37Xnn7dK_cOaMyS_k6qsB2kvPOuipLbcZrSEjLwB8zCPs5RDuXstlpoYfnO78/s1600/Screenshot_2020-02-16+Bootstrap+4+Cards%25288%2529.png)
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Contoh teks, contoh teks.</p>
<p class="card-text">Contoh teks, contoh teks.</p>
<p class="card-text">Contoh teks, contoh teks.</p>
<p class="card-text">Contoh teks, contoh teks.</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">Contoh teks, contoh teks.</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">Contoh teks, contoh teks.</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Contoh teks, contoh teks.</p>
</div>
</div>
</div>
Catatan: Jika ukuran layar kurang dari 576px, maka tampilan Card akan tersusun secara Vertikal.
Membut Group pada Card
Card Group (Dapat dibuat dengan menggunakan class .card-group) hampir sama seperti Card Deck . Perbedaannya adalah Card Group dapat menghapus margin di sisi kanan dan kiri diantara masing-masing Card. Contoh:![Membut Group pada Card Membut Group pada Card](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZiXrqtMAeKoXpW9Pc3PcNqnoJy7R_x0XlvMeOXa4dykj5STvAipiUuVfshGIinDboU1pYGTtOkY15t09aQj9nqqPUGdqjLtJpALrTeZ260GN700xfA1m91fJDmrhT-3zn42g-QhjnJWDF/s1600/Screenshot_2020-02-16+Contoh+Bootstrap+EL+Creative+Academy.png)
<div class="card-group">
<div class="card bg-primary">
<div class="card-body text-center">
<p class="card-text">Contoh teks, contoh teks.</p>
<p class="card-text">Contoh teks, contoh teks.</p>
<p class="card-text">Contoh teks, contoh teks.</p>
<p class="card-text">Contoh teks, contoh teks.</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body text-center">
<p class="card-text">Contoh teks, contoh teks.</p>
</div>
</div>
<div class="card bg-success">
<div class="card-body text-center">
<p class="card-text">Contoh teks, contoh teks.</p>
</div>
</div>
<div class="card bg-danger">
<div class="card-body text-center">
<p class="card-text">Contoh teks, contoh teks.</p>
</div>
</div>
</div>
Catatan: Jika ukuran layar kurang dari 576px, maka tampilan Card akan tersusun secara Vertikal dengan margin atas dan bawah.
Share:
Yasya El Hakim
404 Not Found!
You may like these posts
Comments
Comments