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.