Bootstrap Cards bileşeni, görsel ve metin içeriğini modern ve düzenli bir şekilde sunmanıza olanak tanır. Kartlar, genellikle başlık, metin, görsel, liste ve butonlar gibi içerikleri bir arada sergilemek için kullanılır.
Temel Kullanım
Bir kart oluşturmak için .card sınıfı kullanılır. Kartın içeriği genellikle .card-body sınıfıyla tanımlanır.
Örnek:
<div class="card" style="width: 18rem;">
<img src="https://via.placeholder.com/150" class="card-img-top" alt="Kart Görseli">
<div class="card-body">
<h5 class="card-title">Kart Başlığı</h5>
<p class="card-text">Bu, kart içeriği için bir örnek metindir. Kendi metninizi buraya ekleyebilirsiniz.</p>
<a href="#" class="btn btn-primary">Daha Fazla</a>
</div>
</div>
Başlık ve Alt Başlık
Kartlara başlık ve alt başlık eklemek için .card-title ve .card-subtitle sınıfları kullanılır.
Örnek:
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Kart Başlığı</h5>
<h6 class="card-subtitle mb-2 text-muted">Alt Başlık</h6>
<p class="card-text">Kartlar, içeriği düzenli bir şekilde sergilemek için harikadır.</p>
</div>
</div>
Görsel Destekli Kartlar
Kartların üstüne, altına veya arka planına görsel eklenebilir.
Örnek:
<div class="card">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Kart Görseli">
<div class="card-body">
<p class="card-text">Bu kart, bir görsel içeriyor.</p>
</div>
</div>
Liste İçeren Kartlar
Kartlar, liste gruplarını da destekler.
Örnek:
<div class="card">
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Kart Görseli">
<div class="card-body">
<p class="card-text">Bu kart, bir görsel içeriyor.</p>
</div>
</div>
Kart Grupları
Kartları bir arada göstermek için kart gruplarını kullanabilirsiniz.
Örnek:
<div class="card-group">
<div class="card">
<img src="https://via.placeholder.com/150" class="card-img-top" alt="Kart 1">
<div class="card-body">
<h5 class="card-title">Kart 1</h5>
<p class="card-text">Bu, birinci kartın içeriği.</p>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/150" class="card-img-top" alt="Kart 2">
<div class="card-body">
<h5 class="card-title">Kart 2</h5>
<p class="card-text">Bu, ikinci kartın içeriği.</p>
</div>
</div>
</div>
Kartlarda Renk Kullanımı
Kartlara farklı arka plan renkleri veya kenar çizgileri eklemek için bg- ve border- sınıfları kullanılabilir.
Örnek:
<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
<div class="card-header">Başlık</div>
<div class="card-body">
<h5 class="card-title">Birincil Kart</h5>
<p class="card-text">Bu kart, mavi arka plan rengiyle öne çıkar.</p>
</div>
</div>
Hizalama ve Boyutlandırma
Kartların hizalanması ve genişliği CSS sınıflarıyla ayarlanabilir.
Örnek:
<div class="d-flex justify-content-center">
<div class="card" style="width: 24rem;">
<div class="card-body">
<h5 class="card-title">Ortalı Kart</h5>
<p class="card-text">Bu kart, merkezi bir hizalamaya sahiptir.</p>
</div>
</div>
</div>