Pada tutuorial sebelumnya, kita sudah belajar Tutorial Belajar Bootstrap Bagian 15 : Cara Membuat Style Gambar di Botstrap, selanjutnya kita akan belajar cara membuat card di Bootstrap.
Bootstrap memperkenalkan wadah konten baru yang fleksibel dan dapat diperluas — komponen card— menggantikan panel lama, dan komponen thumbnail.
Card ini mencakup pilihan untuk header dan footer, berbagai macam konten, warna latar belakang kontekstual, dan pilihan tampilan yang beragam.
Membuat Card Dasar
Pembungkus ourter memerlukan class dasar .card, sedangkan konten dapat ditempatkan di dalam .card-body.
Contoh berikut akan menunjukkan kepada Anda cara membuat card dengan gambar yang dicampur dengan beberapa konten teks dan tombol.
<div class="card" style="width: 300px;">
<img src="https://mbahwp.com/wp-content/uploads/2021/04/ava.png" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title">Budi Santoso</h5>
<p class="card-text">Budi adalah perancang dan pengembang web yang tinggal di Ujung Kulon. Dia mengkhususkan diri dalam HTML5, CSS3, JavaScript, Bootstrap, dll.</p>
<a href="#" class="btn btn-primary stretched-link">Tampilkan Profil</a>
</div>
</div>
Jenis Konten untuk Komponen Kartu
Komponen card mendukung berbagai macam konten, termasuk gambar, teks, grup daftar, tautan, navigasi, dan banyak lagi. Berikut adalah contoh dari apa yang didukung oleh card tersebut.
Body only Card
Anda cukup menggunakan .card dengan .card-body di dalamnya, kapan pun Anda perlu membuat kotak padding.
<div class="card">
<div class="card-body"> Ini adalah beberapa teks di dalam kotak berlapis.</div>
</div>
Card dengan Header dan Footer
Anda juga dapat menambahkan header dan footer dalam card menggunakan class .card-header dan .card-footer. Mari kita lihat contoh berikut ini:
<div class="card text-center">
<div class="card-header">Featured</div>
<div class="card-body">
<h5 class="card-title"> NASA meluncurkan wahana surya </h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante.</p>
<a href="#" class="btn btn-primary">Baca selanjutnya </a>
</div>
<div class="card-footer text-muted">2 hari lalu</div>
</div>
Menempatkan Grup Daftar dalam Kartu
Anda juga dapat menempatkan grup daftar di dalam card bersama dengan tipe konten lainnya, seperti yang ditampilkan di sini.
<div class="card" style="width: 18rem;">
<div class="card-header">Featured</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Pajero</li>
<li class="list-group-item">Fortuner</li>
<li class="list-group-item">Avanza</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Tambah Lagi</a>
<a href="#" class="card-link">Bagikan</a>
</div>
</div>
Jangan ragu untuk mencampur dan mencocokkan beberapa jenis konten untuk membuat card yang Anda butuhkan. Contoh berikut akan membuat card lebar tetap dengan gambar, teks, grup daftar, dan tautan.
<div class="card" style="width: 300px;">
<img src="https://mbahwp.com/wp-content/uploads/2021/04/cam.png" class="w-100 border-bottom" alt="Rounded Image">
<div class="card-body">
<h5 class="card-title">Judul Card</h5>
<p class="card-text">Pulvinar leo id risus pellentesque el vestibulum. Sed diam libero egetve sodales sapien vel, aliquet nibhte bibendum enim porttitor orci.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">Pajer</li>
<li class="list-group-item">Fortuner</li>
<li class="list-group-item">Avanza</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Link Card</a>
<a href="#" class="card-link">Link lainnya</a>
</div>
</div>
Kostumasi Card Background
Ada beberapa pilihan untuk menyesuaikan latar belakang, border, dan warna kartu. Anda dapat menggunakan class utilitas teks dan latar belakang untuk mengubah tampilan kartu.
<div class="card text-white bg-primary mb-3" style="width: 20rem;">
<div class="card-body">
<h5 class="card-title">Judul Primary Card</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
</div>
</div>
<div class="card text-white bg-secondary mb-3" style="width: 20rem;">
<div class="card-body">
<h5 class="card-title">Judul Secondary Card</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
</div>
</div>
<div class="card text-white bg-success mb-3" style="width: 20rem;">
<div class="card-body">
<h5 class="card-title">Judul Success Card</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
</div>
</div>
<div class="card text-white bg-danger mb-3" style="width: 20rem;">
<div class="card-body">
<h5 class="card-title">Judul Danger Card</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
</div>
</div>
<div class="card text-white bg-warning mb-3" style="width: 20rem;">
<div class="card-body">
<h5 class="card-title">Judul Warning Card</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
</div>
</div>
<div class="card text-white bg-info mb-3" style="width: 20rem;">
<div class="card-body">
<h5 class="card-title">Judul Info Card</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
</div>
</div>
<div class="card bg-light mb-3" style="width: 20rem;">
<div class="card-body">
<h5 class="card-title">Judul Light Card</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
</div>
</div>
<div class="card text-white bg-dark mb-3" style="width: 20rem;">
<div class="card-body">
<h5 class="card-title">Judul Dark Card</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
</div>
</div>
Kostumasi Border dan Teks Card
Anda juga dapat menyesuaikan warna teks dan border card apa pun menggunakan class utilitas teks dan border. Cukup terapkan class-class ini pada induk .card atau elemen anaknya, seperti yang ditunjukkan di bawah ini:
<div class="card border-primary mb-3" style="width: 20rem;">
<div class="card-body text-primary">
<h5 class="card-title">Judul Primary Card</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
</div>
</div>
<div class="card border-secondary mb-3" style="width: 20rem;">
<div class="card-body text-secondary">
<h5 class="card-title">Judul Secondary Card</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
</div>
</div>
<div class="card border-success mb-3" style="width: 20rem;">
<div class="card-body text-success">
<h5 class="card-title">Judul Success Card</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
</div>
</div>
<div class="card border-danger mb-3" style="width: 20rem;">
<div class="card-body text-danger">
<h5 class="card-title">Judul Danger Card</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
</div>
</div>
<div class="card border-warning mb-3" style="width: 20rem;">
<div class="card-body text-warning">
<h5 class="card-title">Judul Warning Card</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
</div>
</div>
<div class="card border-info mb-3" style="width: 20rem;">
<div class="card-body text-info">
<h5 class="card-title">Judul Info Card</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
</div>
</div>
<div class="card border-light mb-3" style="width: 20rem;">
<div class="card-body text-muted">
<h5 class="card-title">Judul Light Card</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
</div>
</div>
<div class="card border-dark mb-3" style="width: 20rem;">
<div class="card-body text-dark">
<h5 class="card-title">Judul Dark Card</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at.</p>
</div>
</div>
Selain style kartu, Bootstrap juga menyertakan beberapa pilihan untuk menyusun rangkaian kartu. Namun, layout ini belum responsif.
Membuat Grup Card
Anda dapat menggunakan grup card untuk merender card sebagai satu elemen terlampir dengan kolom lebar dan tinggi yang sama. Grup card menggunakan class : flex; untuk mencapai ukuran seragam mereka.
<div class="container-fluid">
<div class="row">
<div class="card-group">
<div class="card">
<img src="https://mbahwp.com/wp-content/uploads/2021/04/cam.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Judul Card</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
</div>
<div class="card-footer">
<small class="text-muted">Pembaruan terkahir 3 menit lalu </small>
</div>
</div>
<div class="card">
<img src="https://mbahwp.com/wp-content/uploads/2021/04/cam.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Judul Card</h5>
<p class="card-text">Vestibulum id metus ac nisl bibendum nibh scelerisque non purus in suspendisse.</p>
</div>
<div class="card-footer">
<small class="text-muted">Pembaruan terakhit 3 menit lalu</small>
</div>
</div>
<div class="card">
<img src="https://mbahwp.com/wp-content/uploads/2021/04/cam.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Judul Card</h5>
<p class="card-text">Pulvinar leo id risus enim. Bibendum varius tincidunt pellentesque malesuada in.</p>
</div>
<div class="card-footer">
<small class="text-muted">Pembaruan terakhir 3 menit lalu </small>
</div>
</div>
</div>
</div>
</div>
Membuat Dek Card
Dek card mirip dengan grup card (yaitu setiap card memiliki lebar dan tinggi yang sama). Satu-satunya perbedaan adalah card tidak terikat satu sama lain. Berikut contohnya:
<div class="container-fluid">
<div class="row">
<div class="card-deck">
<div class="card">
<img src="https://mbahwp.com/wp-content/uploads/2021/04/cam.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Judul Card</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
</div>
<div class="card-footer">
<small class="text-muted">Pembruan terkahir 3 menit lalu</small>
</div>
</div>
<div class="card">
<img src="https://mbahwp.com/wp-content/uploads/2021/04/cam.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Judul Card</h5>
<p class="card-text">Vestibulum id metus ac nisl bibendum nibh scelerisque non purus in suspendisse.</p>
</div>
<div class="card-footer">
<small class="text-muted">Pembaruan terakhir 3 menit lalu</small>
</div>
</div>
<div class="card">
<img src="https://mbahwp.com/wp-content/uploads/2021/04/cam.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Judul Card</h5>
<p class="card-text">Pulvinar leo id risus enim. Bibendum varius tincidunt pellentesque malesuada in.</p>
</div>
<div class="card-footer">
<small class="text-muted">Pembaruan terakhir 3 menit lalu</small>
</div>
</div>
</div>
</div>
</div>
Membuat Kolom Card
Dengan Bootstrap Anda juga dapat membuat grid card seperti Pinterest dengan membungkusnya dalam kolom .card. Card dibuat dengan properti kolom CSS, bukan flexbox untuk memudahkan penyelarasan.
Card diurutkan dari atas ke bawah dan kiri ke kanan. Mari kita lihat contohnya:
<div class="container">
<div class="row">
<div class="card-columns">
<div class="card">
<img src="https://mbahwp.com/wp-content/uploads/2021/04/cam.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Judul Card</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipi elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis velde, semper malesuada.</p>
<p class="card-text"><small class="text-muted">Pembaruan terakhir 3 menit lalu</small></p>
</div>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>Nam eget purus consectetur in vehicula. Nullamr ultrices nisl risus, viverra libero egestas sit amet.</p>
<footer class="blockquote-footer">
<small class="text-muted">Artis</small>
</footer>
</blockquote>
</div>
<div class="card">
<img src="https://mbahwp.com/wp-content/uploads/2021/04/cam.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Judul Card</h5>
<p class="card-text">Vestibulum id metus ac nisl bibendum scelerisque non dignissim purus.</p>
<p class="card-text"><small class="text-muted">Pembaruan terakhir 2 menit lalu</small></p>
</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>Pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel.</p>
<footer class="blockquote-footer text-white">
<small>Artis</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Judul Card</h5>
<p class="card-text">Enim arcu, interdum dignissim venenatis velc metus posuere oc.</p>
<p class="card-text"><small class="text-muted">Pembaruan terakhir 1 menit lalu</small></p>
</div>
</div>
<div class="card">
<img src="https://mbahwp.com/wp-content/uploads/2021/04/cam.png" class="card-img-top" alt="...">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi suscipit tincidunt. Pellentesque viverra sagittis quam at.</p>
<footer class="blockquote-footer">
<small class="text-muted">Artis</small>
</footer>
</blockquote>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Judul Card</h5>
<p class="card-text">Convallis eget pretium eu, bibendum non leo. Proin suscipit purus adipiscing dolor gravida fermentum sapien blandit. Praesent pellentesque ligula dui, in gravida turpis acmy interdum vel metus.</p>
<p class="card-text"><small class="text-muted">Pembaruan terakhir 3 menit lalu</small></p>
</div>
</div>
</div>
</div>
</div>
Card Image Overlay
Anda bahkan dapat mengubah gambar menjadi latar belakang card dan menempatkan teks card di atasnya menggunakan class .card-img-overlay sebagai pengganti .card-body.
Bergantung pada gambar, Anda mungkin membutuhkan style tambahan untuk penyesuaian yang lebih baik. Berikut contohnya:
<div class="card text-white" style="width: 350px;">
<img src="https://mbahwp.com/wp-content/uploads/2021/04/ava.png" class="card-img-top" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Budi Santoso </h5>
<p class="card-text">Budi adalah perancang dan pengembang web yang tinggal di Ujung Kulon. Dia mengkhususkan diri dalam HTML5, CSS3, JavaScript, Bootstrap, dll.</p>
<a href="#" class="btn btn-primary stretched-link">Tampilkan Profil</a>
</div>
</div>
{/html]
<!-- /wp:shortcode -->
<!-- wp:cp/codepen-gutenberg-embed-block {"penURL":"https://codepen.io/hervansin/pen/gOgjLKL","penID":"gOgjLKL"} -->
<div class="wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper"><iframe id="cp_embed_gOgjLKL" src="//codepen.io/anon/embed/gOgjLKL?height=250&theme-id=1&slug-hash=gOgjLKL&default-tab=result" height="250" scrolling="no" frameborder="0" allowfullscreen allowpaymentrequest name="CodePen Embed gOgjLKL" title="CodePen Embed gOgjLKL" class="cp_embed_iframe" style="width:100%;overflow:hidden">CodePen Embed Fallback</iframe></div>
<!-- /wp:cp/codepen-gutenberg-embed-block -->
<!-- wp:heading {"level":3} -->
<h3><strong>Perataan Teks di dalam Card</strong></h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Anda dapat dengan mudah mengubah perataan teks card apa pun — seluruhnya atau bagian tertentu — dengan class utilitas perataan teks. Mari kita lihat contohnya:</p>
<!-- /wp:paragraph -->
<!-- wp:shortcode -->
[html]
<!-- Kartu dengan perataan teks kiri default -->
<div class="card">
<div class="card-body">
<h5 class="card-title">Judul Card</h5>
<p class="card-text">Lorem ipsum dolor sit amet tempor...</p>
<a href="#" class="btn btn-primary">Selanjutnya</a>
</div>
</div>
<!-- Kartu dengan perataan teks tengah -->
<div class="card text-center mt-3">
<div class="card-body">
<h5 class="card-title">Judul Card</h5>
<p class="card-text">Vestibulum metus bibendum nibh sapien...</p>
<a href="#" class="btn btn-primary">Selanjutnya</a>
</div>
</div>
<!-- Kartu dengan perataan teks kanan -->
<div class="card text-right mt-3">
<div class="card-body">
<h5 class="card-title">Judul Card</h5>
<p class="card-text">Pulvinar leo id risus pellentesque diam...</p>
<a href="#" class="btn btn-primary">Selanjutnya</a>
</div>
</div>
Menentukan Ukuran Card
Card tidak memiliki lebar tertentu, lebar 100% secara default. Namun, Anda dapat mengubahnya sesuai kebutuhan dengan CSS khusus, grid class, atau ukuran class utilitas. Mari kita lihat cara kerjanya:
<div class="container-fluid">
<!-- Ukuran Card menggunakan grid markup -->
<div class="row mb-4">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Judul Card</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
<a href="#" class="btn btn-primary">Selanjutnya</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Judul Card</h5>
<p class="card-text">Vestibulum id metus ac nisl bibendum nibh scelerisque non purus in suspendisse.</p>
<a href="#" class="btn btn-primary">Selanjutnya</a>
</div>
</div>
</div>
</div>
<!—Ukuran Card menggunakan utility classes -->
<div class="card w-75 mb-4">
<div class="card-body">
<h5 class="card-title">Judul Card</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
<a href="#" class="btn btn-primary">Selanjutnya</a>
</div>
</div>
<!—Ukuran Card menggunakan utility classes -->
<div class="card" style="width: 15rem;">
<div class="card-body">
<h5 class="card-title">Judul Card</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
<a href="#" class="btn btn-primary">Selanjutnya</a>
</div>
</div>
</div>
Card dengan Stretched Link
Anda dapat menambahkan class .stretched-link ke link di dalam card agar seluruh card dapat diklik (yaitu, seluruh card berfungsi seperti link).
Beberapa tautan tidak disarankan untuk dibuat menjadi stretched link.
Cobalah contoh berikut untuk melihat bagaimana sebenarnya ini bekerja:
<div class="card" style="width: 300px;">
<img src="https://mbahwp.com/wp-content/uploads/2021/04/ava.png" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title">Budi Santoso</h5>
<p class="card-text">Budi adalah perancang dan pengembang web yang tinggal di Ujung Kulon. Dia mengkhususkan diri dalam HTML5, CSS3, JavaScript, Bootstrap, dll.</p>
<a href="#" class="btn btn-primary stretched-link">Tampilkan Profil</a>
</div>
</div>
Semoga tutorial ini membantu Anda untuk belajar cara membuat card di Bootstrap.
0 Komentar