Source

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 .

100%x180
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 class="card-img-top" src="..." alt="Card image cap">
  <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.

Batas gambar [100%x180]

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

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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.

Batas gambar [100%x180]
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 class="card-img-top" src="..." alt="Card image cap">
  <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>

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

100%x180
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

100%x180 
<div class="card mb-3">
  <img class="card-img-top" src="..." alt="Card image cap">
  <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 class="card-img-bottom" src="..." alt="Card image cap">
</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.

100%x270
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 class="card-img" src="..." alt="Card image">
  <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>

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.

100%x180
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

100%x180
Judul kartu

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

Terakhir diperbarui 3 menit yang lalu

100%x180
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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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.

100%x180
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
100%x180
Judul kartu

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

Terakhir diperbarui 3 menit yang lalu
100%x180
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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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.

100%x200
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

100%x200
Judul kartu

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

Terakhir diperbarui 3 menit yang lalu

100%x200
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-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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.

100%x180
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
100%x180
Judul kartu

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

Terakhir diperbarui 3 menit yang lalu
100%x180
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-deck">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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>

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 menyetelnya display: inline-blocksebagai column-break-inside: avoidsolusi antipeluru.

100%x160
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
100%x160
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 teks pendukung di bawah sebagai petunjuk alami untuk konten tambahan.

Terakhir diperbarui 3 menit yang lalu

100%x260

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

Seseorang yang terkenal di Judul Sumber
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-columns">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <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 class="card-img-top" src="..." alt="Card image cap">
    <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">
        <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 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 class="card-img" src="..." alt="Card image">
  </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 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>

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