Canlı Örnekler
İnteraktif Demolar
Bootstrap'in sunduğu bileşenlerin canlı görünümleri.
1. Responsive Grid Sistemi
Farklı ekran boyutlarında yeniden şekillenen grid yapısı.
col-12 col-md-8
col-6 col-md-4
col-6 col-md-4
col-6 col-md-4
col-6 col-md-4
<div class="container text-center">
<div class="row g-2">
<div class="col-12 col-md-8">
<div class="p-3 border bg-light">col-12 col-md-8</div>
</div>
<div class="col-6 col-md-4">
<div class="p-3 border bg-light">col-6 col-md-4</div>
</div>
<div class="col-6 col-md-4">
<div class="p-3 border bg-light">col-6 col-md-4</div>
</div>
<div class="col-6 col-md-4">
<div class="p-3 border bg-light">col-6 col-md-4</div>
</div>
<div class="col-6 col-md-4">
<div class="p-3 border bg-light">col-6 col-md-4</div>
</div>
</div>
</div>2. Navbar + Modal
Karanlık temalı navbar ve JavaScript modal bileşeni.
↑ "Modalı Aç" butonuna tıklayarak Bootstrap Modal bileşenini test edin.
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
<!-- Navbar İçeriği -->
</nav>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Modalı Aç
</button>3. Card Layout
Görsel, başlık ve metin içeren klasik kart bileşeni.
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Kart Başlığı</h5>
<p class="card-text">İçerik açıklaması.</p>
<a href="#" class="btn btn-primary">İncele</a>
</div>
</div>4. Form Validation + Alerts
Floating labellar ve başarı mesajı ile örnek form.
Başarılı! Form verileri başarıyla doğrulandı.
<div class="alert alert-success">Başarılı!</div>
<form class="was-validated">
<div class="form-floating mb-3">
<input type="email" class="form-control" placeholder="E-posta" required>
<label>E-posta adresi</label>
</div>
<button class="btn btn-primary" type="submit">Gönder</button>
</form>