Bootstrap 4 Kartu
Kartu-kartu
Kartu di Bootstrap 4 adalah kotak berbatas dengan beberapa bantalan di sekitar kontennya. Ini termasuk opsi untuk header, footer, konten, warna, dll.
John Doe
Beberapa contoh teks beberapa contoh teks. John Doe adalah seorang arsitek dan insinyur
Lihat ProfilKartu Dasar
Kartu dasar dibuat dengan .cardkelas, dan konten di dalam kartu memiliki .card-bodykelas:
Contoh
<div class="card">
<div class="card-body">Basic
card</div>
</div>
Jika Anda sudah familiar dengan Bootstrap 3, kartu menggantikan panel lama, sumur, dan thumbnail.
Header dan Footer
Kelas .card-headermenambahkan heading ke kartu dan .card-footerkelas menambahkan footer ke kartu:
Contoh
<div class="card">
<div class="card-header">Header</div>
<div class="card-body">Content</div>
<div
class="card-footer">Footer</div>
</div>
Kartu Kontekstual
Untuk menambahkan warna latar belakang kartu, gunakan kelas kontekstual ( .bg-primary,
.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-darkdan .bg-light.
Contoh
Judul, teks, dan tautan
Gunakan .card-titleuntuk menambahkan judul kartu ke elemen heading apa pun. Kelas .card-textdigunakan untuk menghapus margin bawah untuk elemen <p> jika itu adalah anak terakhir (atau satu-satunya) di dalam .card-body. Kelas .card-linkmenambahkan warna biru ke tautan apa pun, dan efek melayang.
Contoh
<div class="card">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p
class="card-text">Some example text. Some example text.</p>
<a href="#" class="card-link">Card link</a>
<a href="#"
class="card-link">Another link</a>
</div>
</div>
Gambar Kartu
John Doe
Beberapa contoh teks beberapa contoh teks. John Doe adalah seorang arsitek dan insinyur
Lihat Profil
Tambah .card-img-topatau .card-img-bottomke
<img>untuk menempatkan gambar di atas atau di bawah di dalam kartu. Perhatikan bahwa kami telah menambahkan gambar di luar .card-bodyuntuk menjangkau seluruh lebar:
Contoh
<div class="card" style="width:400px">
<img class="card-img-top" src="img_avatar1.png"
alt="Card image">
<div class="card-body">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
Tautan membentang
Tambahkan .stretched-linkkelas ke tautan di dalam kartu, dan itu akan membuat seluruh kartu dapat diklik dan diarahkan (kartu akan bertindak sebagai tautan):
John Doe
Beberapa contoh teks beberapa contoh teks. John Doe adalah seorang arsitek dan insinyur
Lihat ProfilContoh
<a href="#" class="btn btn-primary stretched-link">See Profile</a>
Hamparan Gambar Kartu
Ubah gambar menjadi latar belakang kartu dan gunakan .card-img-overlay
untuk menambahkan teks di atas gambar:
Contoh
<div class="card" style="width:500px">
<img class="card-img-top" src="img_avatar1.png"
alt="Card image">
<div class="card-img-overlay">
<h4
class="card-title">John Doe</h4>
<p
class="card-text">Some example text.</p>
<a href="#"
class="btn btn-primary">See Profile</a>
</div>
</div>
Kolom Kartu
Beberapa teks di dalam kartu pertama
Beberapa teks di dalam kartu kedua
Beberapa teks di dalam kartu ketiga
Beberapa teks di dalam kartu keempat
Beberapa teks di dalam kartu kelima
Beberapa teks di dalam kartu keenam
Kelas .card-columnsmembuat petak kartu seperti batu (seperti pinterest). Tata letak akan secara otomatis menyesuaikan saat Anda memasukkan lebih banyak kartu.
Catatan: Kartu ditampilkan secara vertikal pada layar kecil (kurang dari 576 piksel):
Contoh
<div class="card-columns">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
<div
class="card bg-light">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fifth
card</p>
</div>
</div>
<div
class="card bg-info">
<div class="card-body
text-center">
<p class="card-text">Some text inside the sixth
card</p>
</div>
</div>
</div>
Dek Kartu
Beberapa teks di dalam kartu pertama
Beberapa teks lagi untuk menambah ketinggian
Beberapa teks lagi untuk menambah ketinggian
Beberapa teks lagi untuk menambah ketinggian
Beberapa teks di dalam kartu kedua
Beberapa teks di dalam kartu ketiga
Beberapa teks di dalam kartu keempat
Kelas .card-deckmembuat kotak kartu yang memiliki tinggi dan lebar yang sama . Tata letak akan secara otomatis menyesuaikan saat Anda memasukkan lebih banyak kartu.
Catatan: Kartu ditampilkan secara vertikal pada layar kecil (kurang dari 576 piksel):
Contoh
<div class="card-deck">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>
Grup Kartu
Beberapa teks di dalam kartu pertama
Beberapa teks lagi untuk menambah ketinggian
Beberapa teks lagi untuk menambah ketinggian
Beberapa teks lagi untuk menambah ketinggian
Beberapa teks di dalam kartu kedua
Beberapa teks di dalam kartu ketiga
Beberapa teks di dalam kartu keempat
Kelasnya .card-groupmirip dengan .card-deck. Satu-satunya perbedaan adalah bahwa .card-groupkelas menghilangkan margin kiri dan kanan antara setiap kartu.
Catatan: Kartu ditampilkan secara vertikal pada layar kecil (kurang dari 576 piksel), DENGAN margin atas dan bawah:
Contoh
<div class="card-group">
<div class="card bg-primary">
<div class="card-body text-center">
<p
class="card-text">Some
text inside the first card</p>
</div>
</div>
<div class="card bg-warning">
<div class="card-body
text-center">
<p class="card-text">Some text inside the second
card</p>
</div>
</div>
<div
class="card bg-success">
<div class="card-body
text-center">
<p class="card-text">Some text inside the third
card</p>
</div>
</div>
<div
class="card bg-danger">
<div class="card-body
text-center">
<p class="card-text">Some text inside the fourth
card</p>
</div>
</div>
</div>