Kartu Bootstrap 5

kartu

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

kartu dasar

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

Contoh

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

Cuba sendiri

tajuk halaman dan kaki halaman

.card-header Kelas untuk menambahkan tajuk kartu:.card-footer Kelas untuk menambahkan kaki halaman kartu:

Contoh

<div class="card">
  <div class="card-header">tajuk halaman</div>
  <div class="card-body">konten</div>
  <div class="card-footer">kaki halaman</div>
</div>

Cuba 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

Cuba sendiri

judul, teks dan pautan

gunakan .card-title tambah judul kartu ke setiap elemen judul. Jika <p> elemen adalah .card-body akan menjadi elemen anak terakhir (atau satu-satunya elemen anak), maka .card-text Kelas untuk menghapus <p> Margen bawah elemen..card-link Kelas untuk menambahkan warna biru dan efek lewatan kepada pautan mana pun.

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">Pautan kartu</a>
    <a href="#" class="card-link">Pautan lain</a>
  </div>
</div>

Cuba sendiri

Gambar kartu

Tukar .card-img-top atau .card-img-bottom Tambahkan ke <img>boleh meletakkan gambar di atas atau bawah kartu.

Perhatikan, kami menambahkan gambar di luar .card-body untuk melintasi keseluruhan 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 pemprogram dan insinyur. Beberapa contoh teks. Beberapa contoh teks.</p>
    <a href="#" class="btn btn-primary">Lihat profil anda</a>
  </div>
</div>

Cuba sendiri

Kartu gambar penambahan

Tukar 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 anda</a>
  </div>
</div>

Cuba sendiri