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

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

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.

Cras justo odio
Dapibus ac facilisis di
Vestibulum di eros

<div class="card" style="width: 18rem;">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Unggulan

Cras justo odio
Dapibus ac facilisis di
Vestibulum di eros

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

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.

Cras justo odio
Dapibus ac facilisis di
Vestibulum di eros

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">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

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

<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

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Integer posuere erat taruhan.

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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</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-right" 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" 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-top" 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

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

<div class="card mb-3" style="max-width: 540px;">
  <div class="row no-gutters">
    <div class="col-md-4">
      <img src="..." class="card-img" 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 utilitas teks dan 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-white 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-white 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 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 .sr-onlykelas.

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 text-warning">
    <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 text-info">
    <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 digunakan display: flex;untuk mencapai ukuran seragam mereka.

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.

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

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

Dek kartu

Butuh satu set kartu dengan lebar dan tinggi yang sama yang tidak saling menempel? Gunakan deck kartu.

Judul kartu

Ini adalah kartu yang lebih panjang 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

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

Sama seperti dengan grup kartu, footer kartu di deck 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

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

<div class="row row-cols-1 row-cols-md-2">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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.

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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.

<div class="row row-cols-1 row-cols-md-3">
  <div class="col mb-4">
    <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 mb-4">
    <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 mb-4">
    <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 mb-4">
    <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>

Kolom kartu

Kartu dapat diatur ke dalam kolom seperti Masonry.card-columns hanya dengan CSS dengan membungkusnya dalam . Kartu dibuat dengan columnproperti CSS alih-alih flexbox untuk penyelarasan yang lebih mudah. Kartu diurutkan dari atas ke bawah dan kiri ke kanan.

Perhatian! Jarak tempuh Anda dengan kolom kartu dapat bervariasi. Untuk mencegah kartu pecah melintasi kolom, kita harus mengaturnya display: inline-blocksebagai column-break-inside: avoidsolusi antipeluru.

Judul kartu yang membungkus ke baris baru

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

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Integer posuere erat taruhan.

Seseorang yang terkenal di Judul Sumber

Judul kartu

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

Terakhir diperbarui 3 menit yang lalu

Lorem ipsum dolor sit amet, conectetur adipiscing elit. bilangan bulat posuere erat.

Seseorang yang terkenal di Judul Sumber

Judul kartu

Kartu ini memiliki judul reguler dan teks paragraf pendek di bawahnya.

Terakhir diperbarui 3 menit yang lalu

Lorem ipsum dolor sit amet, conectetur adipiscing elit. Integer posuere erat taruhan.

Seseorang yang terkenal di Judul Sumber

Judul kartu

Ini adalah kartu lain dengan judul dan teks pendukung di bawah ini. Kartu ini memiliki beberapa konten tambahan untuk membuatnya sedikit lebih tinggi secara keseluruhan.

Terakhir diperbarui 3 menit yang lalu

<div class="card-columns">
  <div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
      <h5 class="card-title">Card title that wraps to a new line</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 class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </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 bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
      <footer class="blockquote-footer text-white">
        <small>
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card text-center">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has a regular title and short paragraphy of text below it.</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>
  <div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer class="blockquote-footer">
        <small class="text-muted">
          Someone famous in <cite title="Source Title">Source Title</cite>
        </small>
      </footer>
    </blockquote>
  </div>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Kolom kartu juga dapat diperpanjang dan disesuaikan dengan beberapa kode tambahan. Ditampilkan di bawah ini adalah ekstensi .card-columnskelas yang menggunakan CSS yang sama yang kita gunakan—kolom CSS—untuk menghasilkan satu set tingkatan responsif untuk mengubah jumlah kolom.

.card-columns {
  @include media-breakpoint-only(lg) {
    column-count: 4;
  }
  @include media-breakpoint-only(xl) {
    column-count: 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

Dek kartu

Judul kartu

Judul kartu

Judul kartu

Judul kartu

Judul kartu

Judul kartu

Kartu kisi