Kartu-kartu
Kartu Bootstrap menyediakan wadah konten yang fleksibel dan dapat diperluas dengan berbagai varian dan opsi.
Tentang
Kartu adalah wadah konten yang fleksibel dan dapat diperluas . Ini mencakup opsi untuk header dan footer, berbagai konten, warna latar belakang kontekstual, dan opsi tampilan yang kuat. Jika Anda terbiasa dengan Bootstrap 3, kartu menggantikan panel, sumur, dan thumbnail lama kami. Fungsi serupa untuk komponen tersebut tersedia sebagai kelas pengubah untuk kartu.
Contoh
Kartu dibuat dengan markup dan gaya sesedikit mungkin, tetapi masih dapat memberikan banyak kontrol dan penyesuaian. Dibangun dengan flexbox, mereka menawarkan penyelarasan yang mudah dan bercampur dengan baik dengan komponen Bootstrap lainnya. Mereka tidak memilikinya margin
secara default, jadi gunakan utilitas spasi sesuai kebutuhan.
Di bawah ini adalah contoh kartu dasar dengan konten campuran dan lebar tetap. Kartu tidak memiliki lebar tetap untuk memulai, sehingga secara alami akan mengisi lebar penuh elemen induknya. Ini mudah disesuaikan dengan berbagai pilihan ukuran kami .
Judul kartu
Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.
Pergi ke suatu tempat<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Jenis konten
Kartu mendukung berbagai konten, termasuk gambar, teks, grup daftar, tautan, dan lainnya. Di bawah ini adalah contoh dari apa yang didukung.
Tubuh
Blok bangunan kartu adalah .card-body
. Gunakan kapan pun Anda membutuhkan bagian empuk di dalam kartu.
<div class="card">
<div class="card-body">
This is some text within a card body.
</div>
</div>
Judul, teks, dan tautan
Judul kartu digunakan dengan menambahkan .card-title
tag <h*>
. Dengan cara yang sama, tautan ditambahkan dan ditempatkan bersebelahan dengan menambahkan .card-link
tag <a>
.
Subtitle digunakan dengan menambahkan a .card-subtitle
ke <h*>
tag. Jika .card-title
dan .card-subtitle
item ditempatkan dalam .card-body
item, judul kartu dan subjudul akan disejajarkan dengan baik.
Judul kartu
Subjudul kartu
Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.
Tautan kartu Tautan lain<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
Gambar-gambar
.card-img-top
menempatkan gambar di bagian atas kartu. Dengan .card-text
, teks dapat ditambahkan ke kartu. Teks di dalamnya .card-text
juga dapat ditata dengan tag HTML standar.
Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
Daftar grup
Buat daftar konten dalam kartu dengan grup daftar flush.
- Sebuah benda
- Barang kedua
- Item ketiga
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
- Sebuah benda
- Barang kedua
- Item ketiga
<div class="card" style="width: 18rem;">
<div class="card-header">
Featured
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
</div>
- Sebuah benda
- Barang kedua
- Item ketiga
<div class="card" style="width: 18rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-footer">
Card footer
</div>
</div>
Wastafel dapur
Padu padankan beberapa jenis konten untuk membuat kartu yang Anda butuhkan, atau lemparkan semuanya ke sana. Ditampilkan di bawah ini adalah gaya gambar, blok, gaya teks, dan grup daftar—semuanya dibungkus dalam kartu dengan lebar tetap.
Judul kartu
Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.
- Sebuah benda
- Barang kedua
- Item ketiga
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
</ul>
<div class="card-body">
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
Header dan footer
Tambahkan header dan/atau footer opsional di dalam kartu.
Perlakuan gelar khusus
Dengan teks pendukung di bawah ini sebagai petunjuk alami untuk konten tambahan.
Pergi ke suatu tempat<div class="card">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Header kartu dapat ditata dengan menambahkan .card-header
elemen <h*>
.
Unggulan
Perlakuan gelar khusus
Dengan teks pendukung di bawah ini sebagai petunjuk alami untuk konten tambahan.
Pergi ke suatu tempat<div class="card">
<h5 class="card-header">Featured</h5>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Kutipan terkenal, terkandung dalam elemen blockquote.
<div class="card">
<div class="card-header">
Quote
</div>
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>A well-known quote, contained in a blockquote element.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
</div>
Perlakuan gelar khusus
Dengan teks pendukung di bawah ini sebagai petunjuk alami untuk konten tambahan.
Pergi ke suatu tempat<div class="card text-center">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">
2 days ago
</div>
</div>
Perekat
Kartu dianggap tidak spesifik width
untuk memulai, jadi lebarnya akan 100% kecuali dinyatakan lain. Anda dapat mengubah ini sesuai kebutuhan dengan CSS khusus, kelas kisi, mixin Sass kisi, atau utilitas.
Menggunakan markup kisi
Menggunakan kisi, bungkus kartu dalam kolom dan baris sesuai kebutuhan.
Perlakuan gelar khusus
Dengan teks pendukung di bawah ini sebagai petunjuk alami untuk konten tambahan.
Pergi ke suatu tempatPerlakuan gelar khusus
Dengan teks pendukung di bawah ini sebagai petunjuk alami untuk konten tambahan.
Pergi ke suatu tempat<div class="row">
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
Menggunakan utilitas
Gunakan beberapa utilitas ukuran yang tersedia untuk mengatur lebar kartu dengan cepat.
<div class="card w-75">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
<div class="card w-50">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a>
</div>
</div>
Menggunakan CSS khusus
Gunakan CSS khusus di lembar gaya Anda atau sebagai gaya sebaris untuk mengatur lebar.
Perlakuan gelar khusus
Dengan teks pendukung di bawah ini sebagai petunjuk alami untuk konten tambahan.
Pergi ke suatu tempat<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Perataan teks
Anda dapat dengan cepat mengubah perataan teks kartu apa pun—secara keseluruhan atau bagian tertentu—dengan kelas perataan teks kami .
Perlakuan gelar khusus
Dengan teks pendukung di bawah ini sebagai petunjuk alami untuk konten tambahan.
Pergi ke suatu tempatPerlakuan gelar khusus
Dengan teks pendukung di bawah ini sebagai petunjuk alami untuk konten tambahan.
Pergi ke suatu tempatPerlakuan gelar khusus
Dengan teks pendukung di bawah ini sebagai petunjuk alami untuk konten tambahan.
Pergi ke suatu tempat<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-center" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card text-end" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Navigasi
Tambahkan beberapa navigasi ke header (atau blok) kartu dengan komponen nav Bootstrap .
Perlakuan gelar khusus
Dengan teks pendukung di bawah ini sebagai petunjuk alami untuk konten tambahan.
Pergi ke suatu tempat<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a class="nav-link active" aria-current="true" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Perlakuan gelar khusus
Dengan teks pendukung di bawah ini sebagai petunjuk alami untuk konten tambahan.
Pergi ke suatu tempat<div class="card text-center">
<div class="card-header">
<ul class="nav nav-pills card-header-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Gambar-gambar
Kartu menyertakan beberapa opsi untuk bekerja dengan gambar. Pilih dari menambahkan "caps gambar" di kedua ujung kartu, melapisi gambar dengan konten kartu, atau hanya menyematkan gambar di kartu.
Tutup gambar
Serupa dengan header dan footer, kartu dapat menyertakan "caps gambar" atas dan bawah—gambar di bagian atas atau bawah kartu.
Judul kartu
Ini adalah kartu yang lebih lebar dengan teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan. Konten ini sedikit lebih lama.
Terakhir diperbarui 3 menit yang lalu
Judul kartu
Ini adalah kartu yang lebih lebar dengan teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan. Konten ini sedikit lebih lama.
Terakhir diperbarui 3 menit yang lalu
<div class="card mb-3">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
<img src="..." class="card-img-bottom" alt="...">
</div>
Hamparan gambar
Ubah gambar menjadi latar belakang kartu dan overlay teks kartu Anda. Tergantung pada gambarnya, Anda mungkin memerlukan gaya atau utilitas tambahan atau tidak.
<div class="card bg-dark text-white">
<img src="..." class="card-img" alt="...">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>
Horisontal
Menggunakan kombinasi kelas grid dan utilitas, kartu dapat dibuat horizontal dengan cara yang ramah seluler dan responsif. Pada contoh di bawah ini, kami menghapus talang grid dengan .g-0
dan menggunakan .col-md-*
kelas untuk membuat kartu horizontal pada md
breakpoint. Penyesuaian lebih lanjut mungkin diperlukan tergantung pada konten kartu Anda.
Judul kartu
Ini adalah kartu yang lebih lebar dengan teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan. Konten ini sedikit lebih lama.
Terakhir diperbarui 3 menit yang lalu
<div class="card mb-3" style="max-width: 540px;">
<div class="row g-0">
<div class="col-md-4">
<img src="..." class="img-fluid rounded-start" alt="...">
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
Gaya kartu
Kartu menyertakan berbagai opsi untuk menyesuaikan latar belakang, batas, dan warnanya.
Latar belakang dan warna
Gunakan warna teks dan utilitas latar belakang untuk mengubah tampilan kartu.
Judul kartu utama
Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.
Judul kartu sekunder
Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.
Judul kartu sukses
Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.
Judul kartu bahaya
Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.
Judul kartu peringatan
Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.
Judul kartu info
Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.
Judul kartu ringan
Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.
Judul kartu gelap
Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-dark bg-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-dark bg-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-dark bg-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card text-white bg-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
Menyampaikan makna pada teknologi bantu
Menggunakan warna untuk menambah makna hanya memberikan indikasi visual, yang tidak akan disampaikan kepada pengguna teknologi bantu – seperti pembaca layar. Pastikan bahwa informasi yang dilambangkan dengan warna jelas dari konten itu sendiri (misalnya teks yang terlihat), atau disertakan melalui cara alternatif, seperti teks tambahan yang disembunyikan dengan .visually-hidden
kelas.
Berbatasan
Gunakan utilitas perbatasan untuk mengubah hanya border-color
kartu. Perhatikan bahwa Anda dapat menempatkan .text-{color}
kelas pada induk .card
atau subset dari isi kartu seperti yang ditunjukkan di bawah ini.
Judul kartu utama
Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.
Judul kartu sekunder
Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.
Judul kartu sukses
Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.
Judul kartu bahaya
Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.
Judul kartu peringatan
Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.
Judul kartu info
Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.
Judul kartu ringan
Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.
Judul kartu gelap
Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.
<div class="card border-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-primary">
<h5 class="card-title">Primary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-secondary mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-secondary">
<h5 class="card-title">Secondary card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-danger mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-danger">
<h5 class="card-title">Danger card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-warning mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Warning card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-info mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Info card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-light mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h5 class="card-title">Light card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card border-dark mb-3" style="max-width: 18rem;">
<div class="card-header">Header</div>
<div class="card-body text-dark">
<h5 class="card-title">Dark card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
Utilitas Mixin
Anda juga dapat mengubah batas pada header dan footer kartu sesuai kebutuhan, dan bahkan menghapusnya background-color
dengan .bg-transparent
.
Judul kartu sukses
Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.
<div class="card border-success mb-3" style="max-width: 18rem;">
<div class="card-header bg-transparent border-success">Header</div>
<div class="card-body text-success">
<h5 class="card-title">Success card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<div class="card-footer bg-transparent border-success">Footer</div>
</div>
Tata letak kartu
Selain menata konten di dalam kartu, Bootstrap menyertakan beberapa opsi untuk meletakkan rangkaian kartu. Untuk saat ini, opsi tata letak ini belum responsif .
Grup kartu
Gunakan grup kartu untuk merender kartu sebagai elemen tunggal yang dilampirkan dengan kolom lebar dan tinggi yang sama. Kelompok kartu mulai ditumpuk dan digunakan display: flex;
untuk dilampirkan dengan dimensi seragam mulai dari sm
breakpoint.
Judul kartu
Ini adalah kartu yang lebih lebar dengan teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan. Konten ini sedikit lebih lama.
Terakhir diperbarui 3 menit yang lalu
Judul kartu
Kartu ini memiliki teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan.
Terakhir diperbarui 3 menit yang lalu
Judul kartu
Ini adalah kartu yang lebih lebar dengan teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan. Kartu ini memiliki konten yang lebih panjang dari yang pertama untuk menunjukkan aksi ketinggian yang sama.
Terakhir diperbarui 3 menit yang lalu
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
Saat menggunakan grup kartu dengan footer, konten mereka akan secara otomatis berbaris.
Judul kartu
Ini adalah kartu yang lebih lebar dengan teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan. Konten ini sedikit lebih lama.
Judul kartu
Kartu ini memiliki teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan.
Judul kartu
Ini adalah kartu yang lebih lebar dengan teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan. Kartu ini memiliki konten yang lebih panjang dari yang pertama untuk menunjukkan aksi ketinggian yang sama.
<div class="card-group">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
Kartu kisi
Gunakan sistem kisi Bootstrap dan .row-cols
kelasnya untuk mengontrol berapa banyak kolom kisi (dibungkus kartu Anda) yang Anda tampilkan per baris. Misalnya, berikut ini adalah .row-cols-1
meletakkan kartu pada satu kolom, dan .row-cols-md-2
membagi empat kartu dengan lebar yang sama di beberapa baris, dari titik putus sedang ke atas.
Judul kartu
Ini adalah kartu yang lebih panjang dengan teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan. Konten ini sedikit lebih lama.
Judul kartu
Ini adalah kartu yang lebih panjang dengan teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan. Konten ini sedikit lebih lama.
Judul kartu
Ini adalah kartu yang lebih panjang dengan teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan.
Judul kartu
Ini adalah kartu yang lebih panjang dengan teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan. Konten ini sedikit lebih lama.
<div class="row row-cols-1 row-cols-md-2 g-4">
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Ubah ke .row-cols-3
dan Anda akan melihat bungkus kartu keempat.
Judul kartu
Ini adalah kartu yang lebih panjang dengan teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan. Konten ini sedikit lebih lama.
Judul kartu
Ini adalah kartu yang lebih panjang dengan teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan. Konten ini sedikit lebih lama.
Judul kartu
Ini adalah kartu yang lebih panjang dengan teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan.
Judul kartu
Ini adalah kartu yang lebih panjang dengan teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan. Konten ini sedikit lebih lama.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Saat Anda membutuhkan ketinggian yang sama, tambahkan .h-100
ke kartu. Jika Anda ingin ketinggian yang sama secara default, Anda dapat mengatur $card-height: 100%
di Sass.
Judul kartu
Ini adalah kartu yang lebih panjang dengan teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan. Konten ini sedikit lebih lama.
Judul kartu
Ini adalah kartu pendek.
Judul kartu
Ini adalah kartu yang lebih panjang dengan teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan.
Judul kartu
Ini adalah kartu yang lebih panjang dengan teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan. Konten ini sedikit lebih lama.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a short card.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
Sama seperti dengan grup kartu, footer kartu akan secara otomatis berbaris.
Judul kartu
Ini adalah kartu yang lebih lebar dengan teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan. Konten ini sedikit lebih lama.
Judul kartu
Kartu ini memiliki teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan.
Judul kartu
Ini adalah kartu yang lebih lebar dengan teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan. Kartu ini memiliki konten yang lebih panjang dari yang pertama untuk menunjukkan aksi ketinggian yang sama.
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>
</div>
tukang batu
Dalam v4
kami menggunakan teknik khusus CSS untuk meniru perilaku kolom seperti Masonry , tetapi teknik ini datang dengan banyak efek samping yang tidak menyenangkan . Jika Anda ingin memiliki jenis tata letak ini di v5
, Anda bisa menggunakan plugin Masonry. Masonry tidak disertakan dalam Bootstrap , tetapi kami telah membuat contoh demo untuk membantu Anda memulai.
Kelancangan
Variabel
$card-spacer-y: $spacer;
$card-spacer-x: $spacer;
$card-title-spacer-y: $spacer * .5;
$card-border-width: $border-width;
$card-border-radius: $border-radius;
$card-border-color: rgba($black, .125);
$card-inner-border-radius: subtract($card-border-radius, $card-border-width);
$card-cap-padding-y: $card-spacer-y * .5;
$card-cap-padding-x: $card-spacer-x;
$card-cap-bg: rgba($black, .03);
$card-cap-color: null;
$card-height: null;
$card-color: null;
$card-bg: $white;
$card-img-overlay-padding: $spacer;
$card-group-margin: $grid-gutter-width * .5;