Bootstrap Kart (Card) Kullanımı

Örnek

Bootstrap Kart (Card) Kullanımı

Örnek

Bootstrap Kart (Card) Kullanımı

Örnek

Bootstrap Kart (Card) Kullanımı

Örnek

Bootstrap Kart (Card) Kullanımı

Örnek

Bootstrap Kart (Card) Kullanımı

Örnek

Bootstrap Kart (Card) Kullanımı

Örnek

Bootstrap Kart (Card) Kullanımı

Örnek

Bootstrap Kart (Card) KullanımıBootstrap Kart (Card) KullanımıBootstrap Kart (Card) Kullanımı

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mevsimler</title>

    <link rel="stylesheet" href="bootstrap-5.3.3-dist/css/bootstrap.min.css">
    <script src="bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js"></script>
    <style>
        body{
            background-image: url(resim/back.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }
        .row{
            margin-top: 200px;
        }
        .card{
            opacity: 0.9;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="row">
            <div class="col">
            <div class="card text-bg-primary" style="width: 18rem;">
                <img src="resim/kıs.png" class="card-img-top" style="width: 18rem; height: 22rem;">
                <div class="card-body">
                    <p class="card-text">Kışın İstanbul ortalama sıcaklık</p>
                    <h3>-3 C'</h3>
                </div>
            </div>
        </div>



            <div class="col">
            <div class="card text-bg-dark" style="width: 18rem;">
                <img src="resim/sonbahar.jpg" class="card-img-top" style="width: 18rem; height: 22rem;">
                <div class="card-body">
                    <p class="card-text">Sonbahar İstanbul ortalama sıcaklık</p>
                    <h3>9 C'</h3>
                </div>
            </div>
        </div>

            <div class="col">
            <div class="card text-bg-warning" style="width: 18rem;">
                <img src="resim/yaz.png" class="card-img-top" style="width: 18rem; height: 22rem;">
                <div class="card-body">
                    <p class="card-text">Yaz İstanbul ortalama sıcaklık</p>
                    <h3>28 C'</h3>
                </div>
            </div>
        </div>

            <div class="col">
            <div class="card text-bg-light" style="width: 18rem;">
                <img src="resim/ilkb.png" class="card-img-top" style="width: 18rem; height: 22rem;">
                <div class="card-body">
                    <p class="card-text">İlkbahar İstanbul ortalama sıcaklık</p>
                    <h3>19 C'</h3>
                </div>
            </div>
        </div>

        </div>
    </div>

</body>

</html>

   

Örnek

Bootstrap Kart (Card) KullanımıBootstrap Kart (Card) KullanımıBootstrap Kart (Card) Kullanımı

<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="boost/bootstrap-5.3.3-dist/css/bootstrap.min.css">
    <script src="boost/bootstrap-5.3.3-dist/js/bootstrap.bundle.min.js"></script>

</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col">    
                <div style="position: relative; left: 110px; font-size: 35px; top: 60px; color: blue; z-index: 1;">20C</div>
                <div class="card" style="width: 18rem;">
               
                    <img src="ilkbahar.jpg" class="card-img-top" alt="..." height="300px">
                    <div class="card-body">
                        <h5 class="card-title">Yesterday
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            17C</h5>
                        <p class="card-text">Tomorrow
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            15C </p>
                    </div>
                </div>
            </div>

            <div class="col">
                <div style="position: relative; left: 110px; font-size: 35px; top: 60px; color: blue; z-index: 1;">20C</div>
                <div class="card" style="width: 18rem;">
                    <img src="yaz.jpg" class="card-img-top" alt="..." height="300px">
                    <div class="card-body">
                        <h5 class="card-title">Yesterday
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            23C</h5>
                        <p class="card-text">Tomorrow
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            21C </p>
                    </div>
                </div>
            </div>

            <div class="col">
                <div style="position: relative; left: 110px; font-size: 35px; top: 60px; color: blue; z-index: 1;">20C</div>
                <div class="card" style="width: 18rem;">
                    <img src="sonbahar.jpg" class="card-img-top" alt="..." height="300px">
                    <div class="card-body">
                        <h5 class="card-title">Yesterday
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            14C</h5>
                        <p class="card-text">Tomorrow
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            11C </p>
                    </div>
                </div>
            </div>

            <div class="col">
                <div style="position: relative; left: 110px; font-size: 35px; top: 60px; color: blue; z-index: 1;">20C</div>
                <div class="card" style="width: 18rem;">
                    <img src="kıs.jpg" class="card-img-top" alt="..." height="300px">
                    <div class="card-body">
                        <h5 class="card-title">Yesterday
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            8C</h5>
                        <p class="card-text">Tomorrow
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            5C </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

   

Örnek
Bootstrap Kart (Card) Kullanımı 
<!DOCTYPE html>
<html>
    <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" />
</head>
<body>

<div class="container mt-5">
    <div class="row">
        <div class="col">
            <div class="card">
                <img src="resimler/1287.jpg" class="card-img-top" alt="..." />
                <div class="card-body">
                    <h3 class="card-title">Kapadokya</h3>
                    <p class="card-text">Kapadokya, 60 milyon yıl önce Erciyes, Hasandağı ve Göllüdağ’ın püskürttüğü lav ve küllerin oluşturduğu yumuşak tabakaların milyonlarca yıl boyunca yağmur ve rüzgâr tarafından aşındırılmasıyla ortaya çıkan bölgedir. </p>
                    <a href="https://tr.wikipedia.org/wiki/Kapadokya" class="btn btn-primary">Daha fazla...</a>
                </div>
            </div>
        </div>
        <div class="col">
            <div class="card">
                <div class="card-body">
                    <h3 class="card-title">Pamukkale</h3>
                    <p class="card-text">Pamukkale, Türkiye'nin güneybatısındaki Denizli ilinde yer alan doğal bir mevkidir. Kent, termal suyun akışıyla kalan karbonat mineralleriyle oluşan travertenleri ve teraslarıyla ünlüdür.[1] Türkiye'nin Ege Bölgesi'nde, yılın büyük bölümünde ılıman bir iklime sahip olan Menderes Nehri vadisinde bulunur. </p>
                    <a href="https://tr.wikipedia.org/wiki/Kapadokya" class="btn btn-primary">Daha fazla...</a>
                </div>
                <img src="resimler/thumb-1920-591850.jpg" class="card-img-bottom" alt="..." />
            </div>
        </div>
    </div>
    <section class="row my-4">
        <article class="col-5">
            <div class="card text-bg-dark">
                <img src="resimler/51PjlLKwD0L._AC_UF894,1000_QL80_.jpg" alt="" class="card-img" />
                <div class="card-img-overlay">
                    <h3 class="card-title">Kelebekler Vadisi</h3>
                    <p class="card-text">Kelebekler Vadisi, Muğla ili, Fethiye ilçesi Ölüdeniz belde sınırları içerisinde bulunan vadi.[1] Sahip olduğu endemik türler nedeniyle dünya mirası olarak korunması önerilmiş 100 dağdan biri olan Babadağ'ın eteklerinde bulunan Kelebekler Vadisi, 8 Şubat 1995'te 1. derecede doğal Sit ilan edilmiş ve her türlü yapılaşmaya kapatılmıştır. 350 metreye ulaşan sarp kayalık duvarlarla çevrili olan Vadi ismini, barındırdığı 80'den fazla kelebek türünden ve özellikle kaplan kelebeğinden almıştır. </p>
                    <p class="card-text"><small>Wikipediadan alınmıştır.</small></p>
                </div>
            </div>
        </article>
        <article class="col-7">
            <div class="card mb-3">
                <div class="row g-0">
                    <div class="col-md-8">
                        <div class="card-body">
                            <h3 class="card-title">İshak Paşa Sarayı</h3>
                            <p class="card-text">İshak Paşa Sarayı, Ağrı'nın Doğubayazıt ilçesinde bulunan bir saraydır. Yapımına 1685 yılında başlanan ve 1784'te tamamlanan saray; içinde barındırdığı cami, türbe, kütüphane, mahzenler, koğuşlar, harem ve selamlık bölümleri ile büyük bir yapı kompleksidir.</p>
                            <p class="card-text"><small class="text-body-secondary">Wikipediadan alınmıştır.</small></p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <img src="resimler/3.jpg"  class="img-fluid rounded-start" alt=""/>
                    </div>
                </div>
            </div>
        </article>
    </section>
    <section class="row my-4">
        <article class="col">
            <div class="card">
                <div class="card-body">
                    Türkiye, İstanbul'un tarihi alanları (Ayasofya, Topkapı Sarayı), Kapadokya'nın peribacaları, Efes Antik Kenti ve Pamukkale travertenleri gibi dünya mirası yerleri ile zengin bir turizm ülkesidir
                    . Bodrum ve Antalya kıyıları plaj turizmi için öne çıkarken, Nemrut Dağı ve Göbeklitepe kültürel geziler için öne çıkan önemli noktalardır.
                </div>
            </div>
        </article>
        <article class="col">
            <div class="card">
                <div class="card-header">
                    İstanbul
                </div>
                <div class="card-body">
                    <p class="card-text">İstanbul , Türkiye'nin en kalabalık şehri olmasınınyanı sıra kültürel ve finansal merkezidir.Karadeniz ve Marmara Denizi arasındaki dar boğaz olan Boğaz'ın her iki yakasında yer alan İstanbul , hem fiziksel hem de kültürel olarak Asya ve Avrupa'yı birbirine bağlar. İstanbul'un nüfusunun 16 ila 19 milyon arasında olduğu tahmin edilmektedir ve bu da onu Avrupa ve dünyanın en büyük şehirlerinden biri yapmaktadır.</p>
                    <a href="https://wikitravel-org.translate.goog/en/Istanbul?_x_tr_sl=en&_x_tr_tl=tr&_x_tr_hl=tr&_x_tr_pto=tc" class="btn btn-primary"><i class="fa-solid fa-person-walking-luggage text-warning"></i> Daha fazlası için...</a>
                </div>
            </div>
        </article>
    </section>
    <section class="row">
        <article class="col">
            <div class="card text-bg-secondary mb-3">
                <div class="card-header">Gezi Planı</div>
                <div class="card-body">
                    <h5 class="card-title">İstanbul</h5>
                    <p class="card-text">İstanbul, 1985'ten beri UNESCO Dünya Mirası Listesi'nde yer alan tarihi alanları,
Ayasofya, Topkapı Sarayı ve Sultanahmet Camii gibi ikonik yapıları, Boğaz turu ve Galata Kulesi gibi sembollerle zengin bir turizm şehridir. Tarihi Yarımada'nın yanı sıra, İstiklal Caddesi, Kapalıçarşı ve Emirgan Korusu gibi modern ve doğal alanları ile de ön plana çıkar.</p>
                </div>
            </div>
        </article>
    </section>
</div>

</body>
</html>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
 

Grid cards


 Bootstrap Kart (Card) Kullanımı  
<!DOCTYPE html>
<html>
    <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="bootstrap-5.3.5-dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="fontawesome-free-7.2.0-web/css/fontawesome.min.css" rel="stylesheet" type="text/css"/>
    <style>
        div.card-img-overlay {
            transition: all .5s ease-in;
        }
    </style>
</head>
<body>

<div class="container">
    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-6 g-4" id="ResimKutusu">
        <<div class="col">
            <div class="card text-bg-dark">
                <img src="resimler/1032598_1920x1080.jpg" class="card-img" alt="" />
                    <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"><small>Last updated 3 mins ago</small></p>
                    </div>
            </div>
        </div>>
    </div>
</div>
</body>
</html>
<script src="bootstrap-5.3.5-dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<script>
    
    UstuneGelince=(DIV, Durum)=> {
        
        if(Durum==0) {
            DIV.style="";
        }
        else {
            DIV.style="background-color: #000; opacity: .6;";
        }
    };
    
    let Kart=`
        <div class="col">
            <div class="card text-bg-dark">
                <img src="resimler/1032598_1920x1080.jpg" class="card-img" alt="" />
                    <div class="card-img-overlay" onmouseover="UstuneGelince(this)" onmouseleave="UstuneGelince(this,0)">
                        <h5 class="card-title">Sanat</h5>
                        <p class="card-text">Örnek kart yapısı</p>
                        <p class="card-text"><small>Küçük açıklama</small></p>
                    </div>
            </div>
        </div>`;
    
    for(i=0; i<30; i++) {
        document.querySelector("#ResimKutusu").innerHTML+=Kart;
    }
</script>
 

5,408 Okunma 02/04/2026.13:42:43 02/04/2026.16:43:48

/ Yorumunuzu Ekleyin
Görsel Liste
Bootstrap Takvim Seçtiricisi (Datetime Picker)

30,467 okuma, 30.11.2014 02:43

Bootstrap Takvim Seçtiricisi (Datetime Picker)
Bootstrap CSS Componentleri

Bootstrap ile kullanılan CSS destekli HTML Componentlerden bazıları..

26,018 okuma, 20.10.2024 23:15

Bootstrap CSS Componentleri
Bootstrap Form Elemanları

Bootstrapın temel form mantığı ve bir kaç örnek...

24,914 okuma, 07.03.2025 15:22

Bootstrap Form Elemanları
Bootstrap Grid Sistemi

Bildiğiniz gibi Bootstrap ile responsive tasarımlar yapmak çok basit ve hızlı. İstediğimiz her öğe için birer yapılmış ve kopyala yapıştır yaparak hızlıca sitemizi Bootstrap ile şekillendirebiliriz.

23,396 okuma, 12.03.2026 11:29

Bootstrap Grid Sistemi
Bootstrap Class Referansı

Bootstrap v4.3.0 Class Listesi

17,586 okuma, 17.04.2019 02:52

Bootstrap Class Referansı
Bootstrap 3 JavaScript Componentleri

Bootstrap ile kullanılan Javascript destekli Componentlerden bazıları... Makalenin bazı bölümleri ingilizcedir.

14,839 okuma, 20.02.2017 23:06

Bootstrap 3 JavaScript Componentleri
Bootstrap 4 Navbar Menü Örnekleri

Normal bootstrap 4 navabarı ile fare üzerine gelince açılan, yatayda tüm ekranı kaplayan ve zemininde siyah gölgesi olan menü örnek kodları.

9,880 okuma, 04.06.2020 14:44

Bootstrap 4 Navbar Menü Örnekleri
Bootstrap 4 Class Referansı

7,810 okuma, 01.03.2019 04:40

Bootstrap 4 Class Referansı
Bootstrap 4 Yardımcı Kısa Kodlar

6,671 okuma, 04.06.2020 15:14

Bootstrap 4 Yardımcı Kısa Kodlar
Bootstrap 4 ile Ekranı 4 Eşit Parçaya Nasıl Bölebilirsiniz?

Örnekteki uygulama ile Ekranı 4 eşit parçaya bölebilirsiniz.

6,414 okuma, 26.01.2020 17:43

Bootstrap 4 ile Ekranı 4 Eşit Parçaya Nasıl Bölebilirsiniz?
Bootstrap Tablo Örnekleri

4,866 okuma, 26.03.2026 13:23

Bootstrap Tablo Örnekleri
Button Kullanımı

4,585 okuma, 02.04.2026 09:43

Button Kullanımı
Kenarlık Sınıfı

4,440 okuma, 26.03.2026 16:02

Kenarlık Sınıfı
Örnek Sayfa Tasarımları

4,241 okuma,

Örnek Sayfa Tasarımları
Uyarı (Alert) Mesajı Sınıf

Alert sınıfı ile primary, success, info, warning, danger, secondary, dark, light arka plan renkle<br />rine sahip, dikkat çekici mesaj kutuları oluşturulabilir (Görsel 4.42). En temel kullanım şekli aşa<br />ğıdaki örnek kodlarda görülmektedir.

4,240 okuma, 28.02.2025 12:34

Uyarı (Alert) Mesajı Sınıf
Carusel Kullanımı

4,148 okuma, 14.03.2025 10:35

Carusel Kullanımı
Sayfanın Tamamında Koyu / Açık Renkli Temaya Geçme

4,019 okuma, 07.03.2025 14:26

Sayfanın Tamamında Koyu / Açık Renkli Temaya Geçme
Sütün İşlemleri (Coulumns)

636 okuma, 12.03.2026 14:48

Sütün İşlemleri (Coulumns)
Toast Kullanımı

354 okuma,

Toast Kullanımı
Badge Kullanımı

57 okuma, 02.04.2026 11:08

Badge Kullanımı
Yükleniyor...
    Yükleniyor...