1203

Komple Uygulamalı Web Geliştirme Eğitimi

Bootstrap Card

Bootstrap 4 Card Nedir ve Nasıl Kullanılır?

Boostrap 4 Card ile padding değerine sahip bir çerçeve içine image, header, body, footer bölümlerine sahip genelde ürün listesinde kullandığımız card' lar oluşturabiliriz.

Bootstrap 4 ile basit bir card görünümü oluşturalım.

** Bootstrap card' ları için bir genişlik belirtilmediğinden dolayı .container div' ini olduğu gibi kaplar dolayısıyla card için bir genişlik belirtmek ya da bir çerçeve içine almak doğru olandır.

 <div class="card">
    <img class="card-img-top" src="https://via.placeholder.com/300x200" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">Some quick example text to build on the card title</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

Örnek 1 için tıklayınız.

Bootstrap 4 card için tanımlayabileceğimiz image, header, body ve footer kısımlarının hepsini tanımlamak zorunda değiliz. İstediğimiz kısımlardan oluşan card tanımlamaları yapılabilir.

<div class="card">
  <div class="card-body">Basic card</div>
</div>

Bu şekilde sadece card-body sınıfına sahip olan div etiketi için bir padding değeri tanımlanacaktır. 

Örnek 2 için tıklayınız.

header, body ve footer kısımlarından oluşan bir card tanımlaması.

<div class="card">
  <div class="card-header">
     Header
  </div>
  <div class="card-body">
     Content
  </div> 
  <div class="card-footer">
     Footer
  </div>
</div>

** örnekte .card için genişlik vermediğime dikkat ediniz.

Örnek 3 için tıklayınız.

Card için tanımladığımız ana bölümlerden (header, body, footer) kısımlarından başka kullanabileceğimiz sınıflar mevcuttur.

.card-title: başlık tanımlamalarında (h1)

.card-subtitle: alt başlık tanımlamalarında (h2)

.card-text: açıklama cümlelerinde (p)

.card-link: linklerde (a)

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
    <p class="card-text">Some quick example text to build on the card title</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Örnek 4 için tıklayınız.

Card için bir resim ekleyebiliriz.

<div class="card">
  <img class="card-img-top" src="https://via.placeholder.com/300x200">
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title</p>
  </div>
</div>

Örnek 5 için tıklayınız.

Card' ları list group ile birlikte kullanabiliriz.

<div class="card">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Örnek 6 için tıklayınız.

<div class="card">
  <div class="card-header">
     Header
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Örnek 7 için tıklayınız.

<div class="card">
  <img class="card-img-top" src="https://via.placeholder.com/300x200">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Örnek 8 için tıklayınız.

 <div class="card text-center">
  <div class="card-header">
    Header
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Örnek 9 için tıklayınız.

Card' ları .col sınıfları içine alabiliriz.

<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Special title treatment</h5>
        <p class="card-text">With supporting text below as a natural lead-in</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

Örnek 10 için tıklayınız.

Arkaplan resimleri üzerine yazı gelecek şekilde bir card oluşturabiliriz.

<div class="card bg-dark text-white">
  <img class="card-img" src="https://via.placeholder.com/300x200" alt="Card image">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    <p class="card-text">Last updated 3 mins ago</p>
  </div>
</div>

Örnek 11 için tıklayınız.

Card' ların zemin renkleri için .bg-primary.bg-success.bg-info.bg-warning.bg-danger, .bg-secondary.bg-dark ve .bg-light sınıflarını kullanabiliriz.

<div class="card">
    <div class="card-body">Basic card</div>
</div>

<div class="card bg-primary text-white">
    <div class="card-body">Primary card</div>
</div>

<div class="card bg-success text-white">
    <div class="card-body">Success card</div>
</div>

<div class="card bg-info text-white">
   <div class="card-body">Info card</div>
</div>

<div class="card bg-warning text-white">
   <div class="card-body">Warning card</div>
</div>

<div class="card bg-danger text-white">
   <div class="card-body">Danger card</div>
</div>

<div class="card bg-secondary text-white">
   <div class="card-body">Secondary card</div>
</div>

<div class="card bg-dark text-white">
   <div class="card-body">Dark card</div>
</div>

<div class="card bg-light text-dark">
   <div class="card-body">Light card</div>
</div>

Örnek 12 için tıklayınız.