Kartu Bootstrap 5

Kartu

Kartu Bootstrap 5 adalah kotak dengan garis batas, konten disekitarnya memiliki beberapa jarak internal. Ini termasuk opsi judul, kaki halaman, konten, warna, dan lainnya.

Kartu dasar

Kartu dasar adalah .card dibuat kelas, konten di dalam kartu memiliki .card-body Kelas:

Contoh

<div class="card">
  <div class="card-body">Kartu dasar</div>
</div>

Coba Sendiri

Kepala halaman dan kaki halaman

.card-header Gunakan kelas untuk menambahkan judul kartu,.card-footer Gunakan kelas untuk menambahkan kaki halaman kartu:

Contoh

<div class="card">
  <div class="card-header">Kepala halaman</div>
  <div class="card-body">Konten</div>
  <div class="card-footer">Kaki halaman</div>
</div>

Coba Sendiri

Kartu konteks

Untuk menambahkan warna latar belakang kartu, gunakan kelas konteks:

  • .bg-primary
  • .bg-success
  • .bg-info
  • .bg-warning
  • .bg-danger
  • .bg-secondary
  • .bg-dark
  • .bg-light

Contoh

Coba Sendiri

judul, teks dan tautan

gunakan .card-title tambah judul kartu ke setiap elemen judul. Jika <p> elemen adalah .card-body akan menjadi elemen anak terakhir (atau elemen anak tunggal), maka .card-text Kelas untuk menghapus <p> margin bawah elemen..card-link Kelas untuk menambahkan efek biru dan hover ke tautan apapun.

Contoh

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Judul Kartu</h4>
    <p class="card-text">Beberapa contoh teks. Beberapa contoh teks.</p>
    <a href="#" class="card-link">Tautan Kartu</a>
    <a href="#" class="card-link">Tautan Lainnya</a>
  </div>
</div>

Coba Sendiri

Gambar kartu

Ubah .card-img-top atau .card-img-bottom Tambahkan ke <img>dapat menempatkan gambar di atas atau bawah kartu.

Perhatikan, kami menambahkan gambar di luar .card-body untuk melintasi seluruh lebar:

Contoh

<div class="card" style="width:400px">
  <img class="card-img-top" src="avatar.png" alt="Gambar Kartu">
  <div class="card-body">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Bill Gates adalah seorang pemrogram dan insinyur. Beberapa contoh teks. Beberapa contoh teks.</p>
    <a href="#" class="btn btn-primary">Lihat Profil</a>
  </div>
</div>

Coba Sendiri

Kartu gambar penambahan

Ubah gambar menjadi latar belakang kartu dan gunakan .card-img-overlay Tambahkan teks di atas gambar:

Contoh

<div class="card" style="width:500px">
  <img class="card-img-top" src="avatar.png" alt="Gambar Kartu">
  <div class="card-img-overlay">
    <h4 class="card-title">Bill Gates</h4>
    <p class="card-text">Beberapa contoh teks. Beberapa contoh teks.</p>
    <a href="#" class="btn btn-primary">Lihat Profil</a>
  </div>
</div>

Coba Sendiri