Membuat Card dengan Bootstrap 4

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.

Seperti halnya breadcumb dan navbar, card juga dapat di gunakan dengan berbagai macam ukuran dan warna.

Membuat bootstrap 4 card

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 :

• card
• card-header
• card-body
• card-footer

Selain class utama di atas card juga memiliki class lain yang dapat mendukung class utama yaitu :

• card-title
• card-subtitle
• card-img-top
• card-img-bottom
• card-text
• card-link

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>

Style pada bootstrap card

Memberikan Warna card

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.

Mengatur Lebar 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;

Mengatur beberapa Card Height agar sama tinggi nya

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