Hallo kawan kawan kali ini pembahasan di rumah code masih tentang bootstrap 4. Pada pembahasan bootstrap 4 kali ini kita akan belajar tentang bagaimana caranya membuat card dengan menggunakan bootstrap 4.
Bootstrap 4 card adalah sebuah wadah untuk konten yang flexibel dan dapat diperluas menjadi responsive. Di dalam card bootstrap kita dapat memasukan tulisan maupun gambar. Card pada bootstrap merupakan bagian dari komponen bootstrap 4 yang memiliki header, body, dan footer yang dimasukan dalam layout.
Baca Juga :
Seperti halnya breadcumb dan navbar, card juga dapat di gunakan dengan berbagai macam ukuran dan warna.
Seperti sudah dijelaskan di atas bahwa card itu memiliki header, body dan footer hal itu menandakan bahwa card memiliki class tersebut. Class utama pada card :
Selain class utama di atas card juga memiliki class lain yang dapat mendukung class utama yaitu :
Sekarang perhatikan sourcecode di bawah ini saya akan memberikan contoh card dengan class utama saja
<div class="card">
<div class="card-header">class card header</div>
<div class="card-body">
class card body
</div>
<div class="card-footer">class card footer</div>
</div>
sekarang saya akan menambahkan card pendukung
<div class="card col-md-4">
<div class="card-header">class card header</div>
<img class="card-img-top" src="https://www.rumahcode.org/img/blog/add.jpg" alt="Contoh Card img top">
<div class="card-body">
<h5 class="card-title">Contoh card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Contoh card subtitle</h6>
<p class="card-text">Ini adalah contoh card text</p>
<a href="https://www.rumahcode.org/" class="card-link">Contoh Card Link</a>
</div>
<img class="card-img-bottom" src="https://www.rumahcode.org/img/blog/add.jpg" alt="Contoh Card img bottom">
<div class="card-footer">Footer</div>
</div>
Untuk memberikan warna background dan text dengan menambahkan class bg{-primary | -secondary | -success | -danger | -warning | -info | -light | -dark | -white} untuk background dan text{-primary | -secondary | -success | -danger | -warning | -info | -light | -dark | -white} untuk warna text. Class tersebut di masukan setelah class card.
untuk mengatur lebar card kamu dapat menggunakan calss col{-sm | -md | -lg | -xl}{-1 | sampai | -12} atau kamu dapat menambahkan css style sendiri
max-width: 20px;
Untuk mengatur tinggi card agar sama dengan card yang lain kamu dapat menggunakan class d-flex dan flex-fill
<div class="row">
<div class="col-md-4 d-flex">
<div class="card flex-fill" style="max-width: 20rem;">
</div>
</div>
</div>
Untuk contoh lengkap dari tutorial ini kamu dapat menyimak nya di codepen saya atau lihat koce di bawah ini