Bootstrap'in ızgara sistemi flexbox ile oluşturulmuştur ve sayfada 12'ye kadar sütuna izin verir.
12 sütunun tamamını ayrı ayrı kullanmak istemiyorsanız, daha geniş sütunlar oluşturmak için sütunları gruplandırabilirsiniz:
| span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 |
| span 4 | span 4 | span 4 | |||||||||
| span 4 | span 8 | ||||||||||
| span 6 | span 6 | ||||||||||
| span 12 | |||||||||||
Izgara sistemi duyarlıdır ve sütunlar ekran boyutuna bağlı olarak otomatik olarak yeniden düzenlenecektir.
Toplamın toplamının 12 veya daha az olduğundan emin olun (mevcut 12 sütunun tümünü kullanmanıza gerek yoktur).
Bootstrap 5 ızgara sisteminin altı sınıfı vardır:
.col- (ekstra küçük cihazlar - ekran genişliği 576 pikselden az)
.col-sm- (küçük cihazlar - ekran genişliği 576 piksele eşit veya daha büyük)
.col-md- (orta boy cihazlar - ekran genişliği 768 piksele eşit veya daha büyük)
.col-lg- (büyük cihazlar - ekran genişliği 992 piksele eşit veya daha büyük)
.col-xl- (xlarge cihazlar - ekran genişliği 1200 piksele eşit veya daha büyük)
.col-xxl- (xxlarge cihazlar - ekran genişliği 1400 piksele eşit veya daha büyük)
Yukarıdaki sınıflar daha dinamik ve esnek düzenler oluşturmak için birleştirilebilir.
İpucu: Her sınıfın ölçeği artar, dolayısıyla sm ve için aynı genişlikleri ayarlamak istiyorsanız md, yalnızca sm belirtmeniz gerekir.
Bootstrap 5 ızgarasının temel yapısı aşağıdadır:
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>Kendiniz Deneyin →
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid mt-3">
<h1>Basic Grid Structure</h1>
<p>Resize the browser window to see the effect.</p>
<p>The first, second and third row will automatically stack on top of each other when the screen is less than 576px wide.</p>
<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
<div class="col-sm-6 bg-primary text-white">50%</div>
<div class="col-sm-6 bg-dark text-white">50%</div>
</div>
<br>
<div class="row">
<div class="col-sm-4 bg-primary text-white">33.33%</div>
<div class="col-sm-4 bg-dark text-white">33.33%</div>
<div class="col-sm-4 bg-primary text-white">33.33%</div>
</div>
<br>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
<div class="col-sm bg-primary text-white">25%</div>
<div class="col-sm bg-dark text-white">25%</div>
<div class="col-sm bg-primary text-white">25%</div>
<div class="col-sm bg-dark text-white">25%</div>
</div>
<br>
<div class="row">
<div class="col bg-primary text-white">25%</div>
<div class="col bg-dark text-white">25%</div>
<div class="col bg-primary text-white">25%</div>
<div class="col bg-dark text-white">25%</div>
</div>
</div>
</body>
</html>
İlk örnek: bir satır oluşturun (<div class="row">). Ardından istediğiniz sayıda sütunu ekleyin (uygun .col-*-* sınıflarına sahip etiketler). İlk yıldız (*) yanıt verebilirliği temsil eder: sm, md, lg, xl veya xxl, ikinci yıldız ise her satır için toplamı 12'ye ulaşması gereken bir sayıyı temsil eder.
İkinci örnek: her sütun'a bir sayı eklemek yerine, eşit genişlikte sütunlar oluşturmak için önyüklemenin düzeni yönetmesine izin verin: iki " sütun" öğeleri=her sütun için %50 genişlik, üç sütun=her sütun için %33,33 genişlik. Dört sütun=%25 genişlik vb. Sütunları duyarlı hale getirmek için .col-sm|md|lg|xl|xxl komutunu da kullanabilirsiniz.
Aşağıdaki tablo Bootstrap 5 ızgara sisteminin farklı ekran boyutlarında nasıl çalıştığını özetlemektedir:
| Extra small (<576px) | Small (>=576px) | Medium (>=768px) | Large (>=992px) | Extra Large (>=1200px) | XXL (>=1400px) | |
|---|---|---|---|---|---|---|
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| Suitable for | Portrait phones | Landscape phones | Tablets | Laptops | Laptops and Desktops | Laptops and Desktops |
| # of columns | 12 | 12 | 12 | 12 | 12 | 12 |
| Gutter width | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) | 1.5rem (.75rem on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes | Yes | Yes |