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 .

Judul kartu

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

Pergi ke suatu tempat

html

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

html

<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

html

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

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

html

<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

html

<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

html

<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

html

<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

Tautan kartu Tautan lain

html

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

Unggulan

Perlakuan gelar khusus

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

Pergi ke suatu tempat

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

<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

html

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

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

html

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

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

html

<div class="card text-bg-dark">
  <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"><small>Last updated 3 mins ago</small></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.

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

html

<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

Ditambahkan di v5.2.0

Atur a background-colordengan latar depan yang kontras colordengan helper kami.text-bg-{color} . Sebelumnya diperlukan untuk secara manual memasangkan pilihan .text-{color}dan .bg-{color}utilitas Anda untuk penataan, yang masih dapat Anda gunakan jika Anda mau.

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.

html

<div class="card text-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-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-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-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-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-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-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-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.

html

<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

html

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

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

html

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

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

Terakhir diperbarui 3 menit yang lalu

html

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

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.

html

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

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.

html

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

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.

html

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

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

Terakhir diperbarui 3 menit yang lalu

html

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

CSS

Variabel

Ditambahkan di v5.2.0

Sebagai bagian dari pendekatan variabel CSS yang berkembang dari Bootstrap, kartu sekarang menggunakan variabel CSS lokal .carduntuk penyesuaian waktu nyata yang ditingkatkan. Nilai untuk variabel CSS diatur melalui Sass, jadi kustomisasi Sass juga masih didukung.

  --#{$prefix}card-spacer-y: #{$card-spacer-y};
  --#{$prefix}card-spacer-x: #{$card-spacer-x};
  --#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
  --#{$prefix}card-border-width: #{$card-border-width};
  --#{$prefix}card-border-color: #{$card-border-color};
  --#{$prefix}card-border-radius: #{$card-border-radius};
  --#{$prefix}card-box-shadow: #{$card-box-shadow};
  --#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
  --#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
  --#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
  --#{$prefix}card-cap-bg: #{$card-cap-bg};
  --#{$prefix}card-cap-color: #{$card-cap-color};
  --#{$prefix}card-height: #{$card-height};
  --#{$prefix}card-color: #{$card-color};
  --#{$prefix}card-bg: #{$card-bg};
  --#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
  --#{$prefix}card-group-margin: #{$card-group-margin};

Variabel Sass

$card-spacer-y:                     $spacer;
$card-spacer-x:                     $spacer;
$card-title-spacer-y:               $spacer * .5;
$card-border-width:                 $border-width;
$card-border-color:                 var(--#{$prefix}border-color-translucent);
$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;

Kartu-kartu

Tentang

Contoh

Judul kartu

Jenis konten

Tubuh

Judul, teks, dan tautan

Judul kartu

Subjudul kartu

Gambar-gambar

Daftar grup

Wastafel dapur

Judul kartu

Header dan footer

Perlakuan gelar khusus

Unggulan

Perlakuan gelar khusus

Perlakuan gelar khusus

Perekat

Menggunakan markup kisi

Perlakuan gelar khusus

Perlakuan gelar khusus

Menggunakan utilitas

Judul kartu

Judul kartu

Menggunakan CSS khusus

Perlakuan gelar khusus

Perataan teks

Perlakuan gelar khusus

Perlakuan gelar khusus

Perlakuan gelar khusus

Navigasi

Perlakuan gelar khusus

Perlakuan gelar khusus

Gambar-gambar

Tutup gambar

Judul kartu

Judul kartu

Hamparan gambar

Judul kartu

Horisontal

Judul kartu

Gaya kartu

Latar belakang dan warna

Judul kartu utama

Judul kartu sekunder

Judul kartu sukses

Judul kartu bahaya

Judul kartu peringatan

Judul kartu info

Judul kartu ringan

Judul kartu gelap

Menyampaikan makna pada teknologi bantu

Berbatasan

Judul kartu utama

Judul kartu sekunder

Judul kartu sukses

Judul kartu bahaya

Judul kartu peringatan

Judul kartu info

Judul kartu ringan

Judul kartu gelap

Utilitas Mixin

Judul kartu sukses

Tata letak kartu

Grup kartu

Judul kartu

Judul kartu

Judul kartu

Judul kartu

Judul kartu

Judul kartu

Kartu kisi

Judul kartu

Judul kartu

Judul kartu

Judul kartu

Judul kartu

Judul kartu

Judul kartu