Bootstrap Kartlar (Cards)

Web tasarımı öğrenme serüvenimizde, modern web sitelerinin en popüler ve en çok kullanılan arayüz bileşenlerinden birine geldik: Bootstrap Kartlar (Cards). Blog sitelerindeki makale özetleri, e-ticaret sitelerindeki ürün gösterimleri veya bir portfolyodaki takım üyesi profilleri… Modern web tasarımında içerikleri gruplamak ve görsel olarak şık bir kutu içerisinde sunmak için “Kart” tasarımı adeta bir endüstri standardıdır.

Bootstrap 5, eski sürümlerde yer alan paneller (panels), kuyular (wells) ve küçük resimler (thumbnails) gibi yapıları tamamen rafa kaldırarak, tüm bu ihtiyaçları tek bir esnek bileşen olan “Card” (Kart) sistemi ile çözer. Üstelik bu kartlar CSS Flexbox mimarisi üzerine inşa edildiği için hizalamaları ve boyutlandırmaları son derece kolaydır. Bu rehberde, Bootstrap ile kart oluşturmanın temellerini, alt bileşenlerini ve Bootstrap 5 ile gelen hayati güncellemeleri adım adım öğreneceğiz.

1. Bootstrap Kartların (Cards) Temel Anatomisi

Bir Bootstrap kartı oluşturmak için ihtiyaç duyduğunuz en temel sınıf .card sınıfıdır. Bu sınıf, içeriğinize hafif bir kenarlık (border) ve yuvarlatılmış köşeler ekleyerek onu esnek bir kutu (flex container) haline getirir.

Ancak sadece .card sınıfı yeterli değildir; kartın iç yapısını düzenlemek için alt sınıflara ihtiyacımız vardır:

• .card-body: Kartın ana içerik alanıdır. İçerisindeki metinlere ve diğer elementlere harika bir iç boşluk (padding) sağlar.
• .card-title: Kartın ana başlığını tanımlamak için kullanılır (Genellikle <h5> veya <h4> etiketleri ile).
• .card-subtitle: Başlığın hemen altında yer alan daha soluk ve küçük alt başlıktır.
• .card-text: Kartın ana paragraf metnidir. Standart metinlerin boşluklarını (margin) otomatik olarak ayarlar.

Örnek Temel Kart:

<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-body-secondary">Alt Başlık</h6>
    <p class="card-text">Bu alan, kartın ana içeriğini barındıran paragraf kısmıdır. Kullanıcıya ürün veya makale hakkında kısa bir özet sunmak için idealdir.</p>
    <a href="#" class="btn btn-primary">Devamını Oku</a>
  </div>
</div>

(Not: Kartlar varsayılan olarak içine konuldukları alanın %100’ünü kaplarlar. Bu nedenle yukarıdaki örnekte genişliği sınırlamak için style="width: 18rem;" kullanılmıştır. Gerçek projelerde bu boyutlandırma işlemi Grid sistemi ile yapılır.)

2. Kartlara Görsel (Resim) Eklemek

Görseller, kullanıcıların dikkatini çekmenin en iyi yoludur. Bootstrap, kartların içine eklediğiniz resimlerin köşelerinin, kartın dış kenarlarıyla kusursuz bir şekilde uyumlu (yuvarlak) olması için özel sınıflar sunar:

• .card-img-top: Resmi kartın en üstüne yerleştirir ve sadece üst köşelerini yuvarlatır.
• .card-img-bottom: Resmi kartın en altına yerleştirir ve sadece alt köşelerini yuvarlatır.

Örnek Resimli Kart:

<div class="card" style="width: 18rem;">
  <!-- Kartın üst kısmına oturan görsel -->
  <img src="gorsel.jpg" class="card-img-top" alt="Örnek Görsel">
  <div class="card-body">
    <h5 class="card-title">Doğa Yürüyüşü</h5>
    <p class="card-text">Hafta sonu rotalarımız hakkında daha fazla bilgi edinin ve doğanın tadını çıkarın.</p>
    <a href="#" class="btn btn-outline-success">Rotayı İncele</a>
  </div>
</div>

3. Kart Üstbilgisi (Header) ve Altbilgisi (Footer)

Bir kartı görsel olarak üç farklı bölüme (Üst, Orta, Alt) ayırmak isteyebilirsiniz. Bunun için .card-body‘nin dışına, ancak .card kapsayıcısının içine eklenecek sınıflar mevcuttur.

• .card-header: Kartın en üstüne hafif gri arka planlı bir başlık şeridi ekler.
• .card-footer: Kartın en altına hafif gri arka planlı bir alt şerit ekler. Genellikle “Son güncelleme: 3 gün önce” gibi meta verileri veya butonları koymak için kullanılır.

4. Liste Grupları (List Groups) Entegrasyonu

Kartların içerisine sadece düz metinler değil, listeler de ekleyebilirsiniz. Bootstrap’in liste grubu bileşenlerini kartlarla birleştirmek için .list-group-flush sınıfı kullanılır. Bu sınıf, listenin dış kenarlıklarını kaldırarak listenin doğrudan kartın kenarlarına kusursuz bir şekilde yapışmasını (flush) sağlar.

<div class="card" style="width: 18rem;">
  <div class="card-header">Öne Çıkan Özellikler</div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Ücretsiz Kargo</li>
    <li class="list-group-item">2 Yıl Garanti</li>
    <li class="list-group-item">7/24 Destek</li>
  </ul>
</div>

5. Bootstrap 5 ile Kartlarda (Cards) Neler Değişti?

Eğer daha önceden Bootstrap 4 kullandıysanız, birden fazla kartı yan yana dizmek, aralarındaki boşlukları ayarlamak ve aynı yükseklikte olmalarını sağlamak için .card-deck veya .card-columns gibi sınıfları kullanmış olabilirsiniz. Bootstrap 5 sürümü, bu eski mimarileri tamamen kaldırarak sistemi çok daha güçlü ve modern bir yapıya kavuşturmuştur:

• .card-deck Sınıfı Kaldırıldı: Bootstrap 5, .card-deck sınıfını tamamen iptal etmiş ve bunun yerine ızgara (grid) sisteminin gücünü kullanmaya karar vermiştir. Artık kartlarınızı yan yana dizmek ve eşit yükseklikte olmalarını sağlamak için, kartları sütun (column) sınıfları içine sarmanız ve bu sütunları saran ebeveyn kapsayıcıya .row-cols-* sınıflarını eklemeniz gerekmektedir. Bu yeni yaklaşım, farklı ekran boyutlarında (responsive) kartların nasıl hizalanacağı konusunda geliştiricilere çok daha fazla kontrol imkanı sunar.
• .card-columns Sınıfı Kaldırıldı: Pinterest tarzı, tuğla dizilimi gibi düzensiz yüksekliklere sahip kartları listelemek için kullanılan .card-columns sınıfı da kütüphaneden çıkarılmıştır. Bootstrap 5, bu tarz asimetrik tasarımlar için popüler bir JavaScript kütüphanesi olan Masonry kullanımını tavsiye etmektedir.
• Kart Tabanlı Akordeonların Değişimi: Eski sürümlerde akordeon (açılır-kapanır paneller) tasarımları doğrudan kartlar kullanılarak yapılıyordu. Bootstrap 5, bu karmaşık yapıyı terk ederek .card tabanlı akordeon bileşenini yepyeni ve bağımsız bir Accordion bileşeni ile değiştirmiştir.
• Boşlukların (Padding) Standartlaştırılması: Bootstrap 5, tasarım tutarlılığını artırmak adına uyarılar (alerts), ekmek kırıntıları (breadcrumbs) ve kartlar (cards) dahil olmak üzere birçok bileşenin iç boşluk (padding) değerlerini birleştirerek doğrudan $spacer Sass değişkenine bağlamıştır.
• Karanlık Mod (Dark Mode) Uyumu: Bootstrap 5.3 ile birlikte gelen “Color Modes” güncellemesi kapsamında, kartların farklı renk modlarında (özellikle karanlık modda) kusursuz görünmesi (rendering) için kartlara özel bir arka plan rengi tanımlaması getirilmiştir.

6. Yeni Sistemle (Grid) Kartları Yan Yana Dizmek

Eski .card-deck yapısının yerini alan .row-cols-* grid mantığının SEO uyumlu ve mobil öncelikli bir örneğini aşağıda görebilirsiniz:

<!-- Mobilde 1, tablette 2, masaüstünde 3 kart yan yana dizilir. g-4 ile aralarındaki boşluklar ayarlanır -->
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">

  <!-- 1. Kart -->
  <div class="col">
    <div class="card h-100"> <!-- h-100 sınıfı tüm kartların yüksekliklerinin eşit olmasını sağlar -->
      <img src="resim1.jpg" class="card-img-top" alt="Hizmet 1">
      <div class="card-body">
        <h5 class="card-title">SEO Danışmanlığı</h5>
        <p class="card-text">Web sitenizi arama motorlarında üst sıralara taşıyın.</p>
      </div>
    </div>
  </div>

  <!-- 2. Kart -->
  <div class="col">
    <div class="card h-100">
      <img src="resim2.jpg" class="card-img-top" alt="Hizmet 2">
      <div class="card-body">
        <h5 class="card-title">İçerik Pazarlama</h5>
        <p class="card-text">Özgün içeriklerle marka bilinirliğinizi artırın.</p>
      </div>
    </div>
  </div>

  <!-- 3. Kart -->
  <div class="col">
    <div class="card h-100">
      <img src="resim3.jpg" class="card-img-top" alt="Hizmet 3">
      <div class="card-body">
        <h5 class="card-title">Sosyal Medya Yönetimi</h5>
        <p class="card-text">Hedef kitlenizle doğru platformlarda buluşun.</p>
      </div>
    </div>
  </div>

</div>

Bu örnekteki h-100 (height: 100%) sınıfı, Grid sistemi içindeki kartların içlerindeki metin uzunlukları farklı olsa bile esnek kutu (flexbox) mimarisi sayesinde her bir kartın aynı boyda hizalanmasını sağlayarak estetik bir görünüm yaratır.

Özetle

Bootstrap Kartları (Cards), e-ticaret ürün kataloglarından blog gönderilerine kadar her türlü veriyi sunmak için kullanabileceğiniz esnek, modern ve hafif kapsayıcılardır. Bootstrap 5 sürümüyle birlikte grid (ızgara) sistemine tam entegre hale getirilmeleri, bu bileşenleri mobil uyumluluk (responsive) açısından çok daha sağlam ve arama motorları için erişilebilir bir yapıya büründürmüştür. Şimdi .card yapısını kullanarak sitenizin içeriğini daha çekici ve düzenli hale getirmeye başlayabilirsiniz!