Lewati ke konten utama Lewati ke navigasi dokumen
in English

Kartu-kartu

Kartu Bootstrap menyediakan wadah konten yang fleksibel dan dapat diperluas dengan berbagai varian dan opsi.

Di halaman ini

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

Placeholder Image cap
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.

Ini adalah beberapa teks di dalam badan 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-titletag <h*>. Dengan cara yang sama, tautan ditambahkan dan ditempatkan bersebelahan dengan menambahkan .card-linktag <a>.

Subtitle digunakan dengan menambahkan a .card-subtitleke <h*>tag. Jika .card-titledan .card-subtitleitem ditempatkan dalam .card-bodyitem, 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-topmenempatkan gambar di bagian atas kartu. Dengan .card-text, teks dapat ditambahkan ke kartu. Teks di dalamnya .card-textjuga dapat ditata dengan tag HTML standar.

Placeholder Image cap

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>
Unggulan
  • 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
Catatan kaki kartu 
<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.

Placeholder Image cap
Judul kartu

Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.

  • Sebuah benda
  • Barang kedua
  • Item ketiga
Tautan kartu Tautan lain 
<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>

Tambahkan header dan/atau footer opsional di dalam kartu.

Unggulan
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-headerelemen <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>
Mengutip

Kutipan terkenal, terkandung dalam elemen blockquote.

Seseorang yang terkenal di Judul Sumber 
<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>
Unggulan
Perlakuan gelar khusus

Dengan teks pendukung di bawah ini sebagai petunjuk alami untuk konten tambahan.

Pergi ke suatu tempat
2 hari yang lalu 
<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 widthuntuk 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 tempat
Perlakuan 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.

Judul kartu

Dengan teks pendukung di bawah ini sebagai petunjuk alami untuk konten tambahan.

Tombol
Judul kartu

Dengan teks pendukung di bawah ini sebagai petunjuk alami untuk konten tambahan.

Tombol 
<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 tempat
Perlakuan gelar khusus

Dengan teks pendukung di bawah ini sebagai petunjuk alami untuk konten tambahan.

Pergi ke suatu tempat
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>

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

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

Placeholder Image cap
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

Placeholder Image cap 
<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.

Placeholder Card image
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 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>
Perhatikan bahwa konten tidak boleh lebih besar dari tinggi gambar. Jika konten lebih besar dari gambar, konten akan ditampilkan di luar gambar.

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-0dan menggunakan .col-md-*kelas untuk membuat kartu horizontal pada mdbreakpoint. Penyesuaian lebih lanjut mungkin diperlukan tergantung pada konten kartu Anda.

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

Tajuk
Judul kartu utama

Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.

Tajuk
Judul kartu sekunder

Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.

Tajuk
Judul kartu sukses

Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.

Tajuk
Judul kartu bahaya

Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.

Tajuk
Judul kartu peringatan

Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.

Tajuk
Judul kartu info

Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.

Tajuk
Judul kartu ringan

Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.

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

Berbatasan

Gunakan utilitas perbatasan untuk mengubah hanya border-colorkartu. Perhatikan bahwa Anda dapat menempatkan .text-{color}kelas pada induk .cardatau subset dari isi kartu seperti yang ditunjukkan di bawah ini.

Tajuk
Judul kartu utama

Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.

Tajuk
Judul kartu sekunder

Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.

Tajuk
Judul kartu sukses

Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.

Tajuk
Judul kartu bahaya

Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.

Tajuk
Judul kartu peringatan

Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.

Tajuk
Judul kartu info

Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.

Tajuk
Judul kartu ringan

Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.

Tajuk
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-colordengan .bg-transparent.

Tajuk
Judul kartu sukses

Beberapa contoh teks cepat untuk membangun judul kartu dan membuat sebagian besar konten kartu.

catatan kaki 
<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 smbreakpoint.

Placeholder Image cap
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

Placeholder Image cap
Judul kartu

Kartu ini memiliki teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan.

Terakhir diperbarui 3 menit yang lalu

Placeholder Image cap
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.

Placeholder Image cap
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
Placeholder Image cap
Judul kartu

Kartu ini memiliki teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan.

Terakhir diperbarui 3 menit yang lalu
Placeholder Image cap
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>
    </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-colskelasnya untuk mengontrol berapa banyak kolom kisi (dibungkus kartu Anda) yang Anda tampilkan per baris. Misalnya, berikut ini adalah .row-cols-1meletakkan kartu pada satu kolom, dan .row-cols-md-2membagi empat kartu dengan lebar yang sama di beberapa baris, dari titik putus sedang ke atas.

Placeholder Image cap
Judul kartu

Ini adalah kartu yang lebih panjang dengan teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan. Konten ini sedikit lebih lama.

Placeholder Image cap
Judul kartu

Ini adalah kartu yang lebih panjang dengan teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan. Konten ini sedikit lebih lama.

Placeholder Image cap
Judul kartu

Ini adalah kartu yang lebih panjang dengan teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan.

Placeholder Image cap
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-3dan Anda akan melihat bungkus kartu keempat.

Placeholder Image cap
Judul kartu

Ini adalah kartu yang lebih panjang dengan teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan. Konten ini sedikit lebih lama.

Placeholder Image cap
Judul kartu

Ini adalah kartu yang lebih panjang dengan teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan. Konten ini sedikit lebih lama.

Placeholder Image cap
Judul kartu

Ini adalah kartu yang lebih panjang dengan teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan.

Placeholder Image cap
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-100ke kartu. Jika Anda ingin ketinggian yang sama secara default, Anda dapat mengatur $card-height: 100%di Sass.

Placeholder Image cap
Judul kartu

Ini adalah kartu yang lebih panjang dengan teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan. Konten ini sedikit lebih lama.

Placeholder Image cap
Judul kartu

Ini adalah kartu pendek.

Placeholder Image cap
Judul kartu

Ini adalah kartu yang lebih panjang dengan teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan.

Placeholder Image cap
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.

Placeholder Image cap
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
Placeholder Image cap
Judul kartu

Kartu ini memiliki teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan.

Terakhir diperbarui 3 menit yang lalu
Placeholder Image cap
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="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 v4kami 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-color:                 rgba($black, .125);
$card-border-radius:                $border-radius;
$card-box-shadow:                   null;
$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;