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:

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:

<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:

<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:

<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:

<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:

<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:

<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:

<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:

<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:

<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.