ÇAM | Bloglar

Web sitelerinde kullanıcı deneyimini artırmak için içerikleri sade, şık ve modüler bir yapıda göstermek gerekir. Bu yazıda Bootstrap Card ve Slider (Carousel) bileşenlerinin nasıl kullanılacağını öğreneceğiz.

Card ve Slider Tasarımı Nasıl Yapılır?

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Card Örneği</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background: #f5f5f7;
            padding: 40px;
            display: flex;
            justify-content: center;
        }
        .card {
            border-radius: 10px;
            overflow: hidden;
        }
        .card img {
            height: 200px;
            object-fit: cover;
        }
        .card-body {
            text-align: center;
        }
        .btn-primary {
            border-radius: 6px;
        }
    </style>
</head>
<body>
    <div class="card shadow-sm" style="width: 16rem;">
        <img src="https://picsum.photos/320/200" class="card-img-top" alt="örnek görsel">
        <div class="card-body">
            <h5 class="card-title">Bootstrap Kart</h5>
            <p class="card-text">
                Kart yapılarıyla içerikleri düzenli gösterebilirsiniz.
            </p>
            <a class="btn btn-primary">Detayları Gör</a>
        </div>
    </div>
</body>
</html>

İpucu: Kartları .row ve .col sınıfları içinde kullanarak ızgara düzeni oluşturabilirsin. Mobilde otomatik olarak alt alta dizilirler.