Cara menggunakan cards bootstrap responsive

Bootstrap 4 memperkenalkan kotak (container) konten baru yang fleksibel dan dapat diextend yaitu card component dimana ini sebagai pengganti old panel, wells, dan komponen thumbnail. Ini juga termasuk opsi untuk header dan footer, berbagai konten, warna contextual background, dan opsi tampilan yang bagus.

Membuat Basic Card

Wrapper ourter membutuhkan kelas dasar .card, sedangkan konten dapat ditempatkan di dalam .card-body. Contoh berikut akan menunjukkan kepada kalian cara membuat kartu dengan gambar yang dicampur dengan beberapa konten teks dan button.

<div class="card" style="width: 300px;">
    <img src="images/sample.svg" class="card-img-top" alt="...">
    <div class="card-body text-center">
        <h5 class="card-title">Alice Liddel</h5>
        <p class="card-text">Alice is a freelance web designer and developer based in London. She is specialized in HTML5, CSS3, JavaScript, Bootstrap, etc.</p>
        <a href="#" class="btn btn-primary">View Profile</a>
    </div>
</div>

Output dari contoh di atas akan terlihat seperti ini:

Type Content untuk Card Component

Card component mendukung beragam konten, termasuk gambar, teks, list group, tautan, nav, dan banyak lagi. Berikut adalah contoh dari apa yang didukung oleh kartu.

Body Only Card

Kalian cukup menggunakan .card dengan .card-body di dalamnya, kapan pun kalian perlu membuat padded box.

<div class="card">
    <div class="card-body">This is some text within a padded box.</div>
</div>

Output dari contoh di atas akan terlihat seperti ini:

Card dengan Header dan Footer

Kalian juga dapat menambahkan header dan footer di dalam card kalian masing-masing menggunakan kelas .card-header dan .card-footer. Mari kita lihat contoh berikut:

<div class="card text-center">
    <div class="card-header">Featured</div>
    <div class="card-body">
        <h5 class="card-title">NASA launches solar probe</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">Know more</a>
    </div>
    <div class="card-footer text-muted">2 days ago</div>
</div>

Output dari contoh di atas akan terlihat seperti ini:

Menempatkan List Group ke dalam Card

Kalian juga dapat menempatkan list group di dalam kartu bersama dengan jenis konten lainnya, seperti yang ditunjukkan pada contoh berikut.

<div class="card" style="width: 18rem;">
    <div class="card-header">Featured</div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Vestibulum at eros</li>
    </ul>
    <div class="card-body">
        <a href="#" class="card-link">Add More</a>
        <a href="#" class="card-link">Share</a>
    </div>
</div>

Output dari contoh di atas akan terlihat seperti ini:

Jangan ragu untuk mencampur dan mencocokkan beberapa jenis konten untuk membuat card yang kalian butuhkan. Contoh berikut akan membuat fixed-width card dengan gambar, text, list group, dan link.

<div class="card" style="width: 300px;">
    <img src="images/avatar.svg" class="w-100 border-bottom" alt="Rounded Image">
    <div class="card-body">
        <h5 class="card-title">Card title</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">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Vestibulum at eros</li>
    </ul>
    <div class="card-body">
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
    </div>
</div>

Customizing Card Background

Ada beberapa opsi untuk meng-customize latar belakang card, border, dan warna. Kalian dapat menggunakan kelas text dan background utility untuk mengubah tampilan card.

<div class="row">
    <div class="col-sm-6">
        <div class="card text-white bg-primary mb-4">
            <div class="card-body">
                <h5 class="card-title">Primary card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card text-white bg-secondary mb-4">
            <div class="card-body">
                <h5 class="card-title">Secondary card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card text-white bg-success mb-4">
            <div class="card-body">
                <h5 class="card-title">Success card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card text-white bg-danger mb-4">
            <div class="card-body">
                <h5 class="card-title">Danger card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card text-white bg-warning mb-4">
            <div class="card-body">
                <h5 class="card-title">Warning card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card text-white bg-info mb-4">
            <div class="card-body">
                <h5 class="card-title">Info card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>    
    <div class="col-sm-6">
        <div class="card text-white bg-dark">
            <div class="card-body">
                <h5 class="card-title">Dark card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card bg-light">
            <div class="card-body">
                <h5 class="card-title">Light card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
</div>

Output dari contoh di atas akan terlihat seperti ini:

Customizing Card Border dan Text

Kalian juga dapat menyesuaikan teks dan warna border dari card apa pun menggunakan teks dan kelas border utility. Cukup terapkan kelas-kelas ini pada induk .card atau elemen turunannya, seperti yang ditunjukkan di bawah ini:

<div class="row">
    <div class="col-sm-6">
        <div class="card border-primary mb-4">
            <div class="card-body text-primary">
                <h5 class="card-title">Primary card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card border-secondary mb-4">
            <div class="card-body text-secondary">
                <h5 class="card-title">Secondary card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card border-success mb-4">
            <div class="card-body text-success">
                <h5 class="card-title">Success card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card border-danger mb-4">
            <div class="card-body text-danger">
                <h5 class="card-title">Danger card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card border-warning mb-4">
            <div class="card-body text-warning">
                <h5 class="card-title">Warning card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card border-info mb-4">
            <div class="card-body text-info">
                <h5 class="card-title">Info card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card border-dark mb-4">
            <div class="card-body text-dark">
                <h5 class="card-title">Dark card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card border-light mb-4">
            <div class="card-body text-muted">
                <h5 class="card-title">Light card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>        
</div>

Output dari contoh di atas akan terlihat seperti ini:

Card Layout Option

Selain penataan card, Bootstrap juga menyertakan beberapa opsi untuk meletakkan seri kartu. Namun, layout ini belum responsive.

Membuat Card Group

Kalian dapat menggunakan grup card untuk membuat card sebagai elemen tunggal yang dilampirkan dengan width dan height column yang sama. Card group menggunakan display: flex; untuk mencapai ukuran yang seragam.

<div class="card-group">
    <div class="card">
        <img src="images/thumbnail.svg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card title</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">Last updated 3 mins ago</small>
        </div>
    </div>
    <div class="card">
        <img src="images/thumbnail.svg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card title</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">Last updated 3 mins ago</small>
        </div>
    </div>
    <div class="card">
        <img src="images/thumbnail.svg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card title</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">Last updated 3 mins ago</small>
        </div>
    </div>
</div>

Output dari contoh di atas akan terlihat seperti ini:

Membuat Card Deck

Card deck mirip dengan card group (mis. Setiap card memiliki width dan height yang sama). Satu-satunya perbedaan adalah card tidak saling menempel. Berikut contohnya:

<div class="card-group">
    <div class="card">
        <img src="images/thumbnail.svg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card title</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">Last updated 3 mins ago</small>
        </div>
    </div>
    <div class="card">
        <img src="images/thumbnail.svg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card title</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">Last updated 3 mins ago</small>
        </div>
    </div>
    <div class="card">
        <img src="images/thumbnail.svg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card title</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">Last updated 3 mins ago</small>
        </div>
    </div>
</div>

Output dari contoh di atas akan terlihat seperti ini:

Membuat Card Column

Dengan Bootstrap 4 kalian juga dapat membuat grid kartu seperti Pinterest dengan membungkusnya (wrapping) ke dalam .card-kolom. Card dibuat dengan properti kolom CSS dimana sebagai gantinya hal tersebut akan memudahkan untuk penyelarasan (alignment) flexbox. Card dibuat dari atas ke bawah dan dari kiri ke kanan. Mari kita lihat contohnya:

<div class="card-columns">
<div class="card">
    <img src="images/thumbnail.svg" class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">Card title</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.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</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.</p>
        <footer class="blockquote-footer">
            <small class="text-muted">Someone famous</small>
        </footer>
    </blockquote>
</div>
<div class="card">
    <img src="images/thumbnail.svg" class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Vestibulum id metus ac nisl bibendum scelerisque non dignissim purus.</p>
        <p class="card-text"><small class="text-muted">Last updated 2 mins ago</small></p>
    </div>
</div>
<div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
        <p>Pulvinar leo risus vestibulum. Sed diam on sodales eget.</p>
        <footer class="blockquote-footer text-white">
            <small>Someone famous</small>
        </footer>
    </blockquote>
</div>
<div class="card text-center">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Enim arcu, interdum dignissim venenatis velc.</p>
        <p class="card-text"><small class="text-muted">Last updated 1 mins ago</small></p>
    </div>
</div>
<div class="card">
    <img src="images/thumbnail.svg" 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 quam.</p>
        <footer class="blockquote-footer">
            <small class="text-muted">Someone famous</small>
        </footer>
    </blockquote>
</div>
<div class="card">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Convallis eget pretium, bibendum non leo. Proien suscipit purus adipiscing dolor gravida fermentum sapien blandit praest interdum vel metus.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
</div>
</div>

Output dari contoh di atas akan terlihat seperti ini:

Membuat Horizontal Card

Kalian juga dapat membuat card horisontal dimana konten gambar dan teks ditempatkan berdampingan menggunakan kombinasi kelas grid dan utility, seperti yang ditunjukkan dalam contoh berikut:

<div class="card">
    <div class="card-body">This is some text within a padded box.</div>
</div>

Output dari contoh di atas akan terlihat seperti ini:

Card Image Overlay

Kalian bahkan dapat mengubah gambar menjadi card background dan menempatkan card text di atasnya menggunakan kelas .card-img-overlay pada .card-body. Tergantung pada gambar, kalian mungkin perlu style tambahan untuk penyesuaian yang lebih baik. Berikut contohnya:

<div class="card">
    <div class="card-body">This is some text within a padded box.</div>
</div>

Output dari contoh di atas akan terlihat seperti ini:

Catatan: Card content tidak boleh lebih besar dari ketinggian gambar. Jika konten lebih besar dari gambar, maka konten akan ditampilkan di luar gambar.

Text Alignment di dalam Card

Kalian dapat dengan mudah mengubah alignment text card apa pun — seluruhnya atau bagian tertentu saja — dengan kelas text alignment utility. Mari kita lihat contoh berikut:

<div class="card">
    <div class="card-body">This is some text within a padded box.</div>
</div>

Menentukan Card Size

Card tidak memiliki lebar yang spesifik, secara default 100% lebar. Namun, kalian dapat mengubahnya sesuai kebutuhan dengan custom CSS, kelas grid, atau sizing utility class. Mari kita lihat bagaimana ini bekerja:

<div class="card">
    <div class="card-body">This is some text within a padded box.</div>
</div>

Card dengan Stretched Link

Kalian dapat menambahkan kelas .stretched-link ke tautan di dalam card untuk membuat agar seluruh card dapat diklik (mis. Seluruh kartu bertindak seperti tautan). Beberapa tautan tidak disarankan menggunakan stretched link.