Bootstrap’in en temel yapı taşlarından biri olan “Container” (Kapsayıcı) kavramı ile devam ediyoruz. Önceki konularda Bootstrap’in ızgara (grid) sisteminin mantığına değinmiştik. İşte o muazzam ızgara sisteminin doğru çalışabilmesi için ihtiyaç duyduğunuz ilk ve en önemli bileşen Container’dır.
Peki, tam olarak Bootstrap Container nedir, ne işe yarar ve projelerimizde nasıl kullanılır? Gelin, web tasarımına yeni başlayan birinin bile kolayca anlayabileceği detaylı örneklerle bu konuyu pekiştirelim.
Bootstrap Container Nedir ve Neden Önemlidir?
Bootstrap’te Container’lar, içeriğinizi belirli bir cihaz veya ekran boyutu (viewport) içinde barındırmak, iç boşluklarını (padding) ayarlamak ve hizalamak (genellikle merkeze almak) amacıyla kullanılan en temel düzen (layout) elemanıdır. Başka bir deyişle, web sayfanızdaki metinlerin, görsellerin ve diğer öğelerin ekranın en uç köşelerine yapışmasını engelleyerek, onlara düzenli ve estetik bir çerçeve sunar.
Özellikle belirtmek gerekir ki; Bootstrap’in varsayılan ızgara (grid) sistemini (satırlar ve sütunlar) kullanırken, bu yapıyı mutlaka bir Container içine almanız zorunludur. Aksi takdirde, sütunlar arasındaki boşluklar ve hizalamalar doğru çalışmayacaktır.
Bootstrap 5’te Container Çeşitleri
Gelişen web teknolojileri ve farklı cihaz ekranları (mobil, tablet, masaüstü, dev ekranlar), tasarımların esnek olmasını gerektirir. Bootstrap 5, geliştiricilere tam olarak bu esnekliği sunmak için üç farklı Container türü barındırır:
1. Sabit Genişlikli (Fixed-Width) Container: .container
En çok kullanılan kapsayıcı türüdür. .container sınıfı, duyarlı (responsive) ve sabit genişlikli bir yapı sunar. Bunun anlamı şudur: Ekran boyutu belirli bir kırılma noktasına (breakpoint) ulaştığında, container’ın maksimum genişliği (max-width) aniden değişir. Ekranı küçülttükçe veya büyüttükçe içeriğinizin kademeli olarak merkeze oturduğunu görürsünüz.
2. Tam Genişlikli (Akışkan) Container: .container-fluid
Eğer içeriğinizin cihazın ekran boyutu ne olursa olsun ekranın %100’ünü kaplamasını istiyorsanız .container-fluid sınıfını kullanmalısınız. Tüm ekran boyutlarında (mobilden dev masaüstü monitörlere kadar) uçtan uca uzanan bir tasarıma sahip olursunuz. Genellikle tam ekran haritalar, dev arka plan görselleri (hero section) veya geniş paneller (dashboard) için tercih edilir.
3. Duyarlı (Responsive) Containerlar: .container-{breakpoint}
Bootstrap 5 ile birlikte gelen ve çok sevilen bu özellik, belirli bir ekran boyutuna kadar %100 genişlikte çalışan, o noktadan sonra ise sabit genişliğe geçen kapsayıcılar oluşturmanızı sağlar. Örneğin; .container-md sınıfını kullanırsanız, sayfanız mobil cihazlarda ve küçük ekranlarda (768px’in altında) ekranın %100’ünü kaplar; ancak ekran 768px ve üzerine çıktığında sabit bir genişliğe kavuşarak merkeze hizalanır.
Ekran Kırılma Noktaları (Breakpoints) ve Maksimum Genişlikler
Kavramları daha iyi anlamak için Bootstrap 5’in ekran boyutlarını ve .container sınıflarının bu ekranlardaki maksimum genişlik (max-width) değerlerini bilmek SEO uyumlu ve responsive (duyarlı) bir tasarım için çok önemlidir.
Bootstrap 5, altı farklı ekran boyutu (kırılma noktası) sunar. İşte .container sınıfının ekranlara göre aldığı maksimum genişlikler:
- Ekstra Küçük (xs – 576px altı): Genişlik %100 olur.
- Küçük (sm – 576px ve üzeri): Maksimum genişlik 540px olur.
- Orta (md – 768px ve üzeri): Maksimum genişlik 720px olur.
- Geniş (lg – 992px ve üzeri): Maksimum fixed genişlik 960px olur.
- Ekstra Geniş (xl – 1200px ve üzeri): Maksimum genişlik 1140px olur.
- Ekstra Ekstra Geniş (xxl – 1400px ve üzeri): Bootstrap 5 ile eklenen bu yeni boyutta, maksimum genişlik 1320px olur.
(Önemli Not: .container-fluid bu ekranların tamamında istisnasız %100 genişlik değerine sahiptir.)
İlk Defa Öğrenenler İçin Pratik Kod Örnekleri
Konuyu teorikten pratiğe dökelim. HTML sayfanızda bu sınıfların nasıl davrandığını görmek konuyu pekiştirmenizi sağlayacaktır.
Örnek 1: Klasik .container Kullanımı Aşağıdaki örnekte, içeriğimiz ekranın ortasında, sağdan ve soldan eşit boşluklar bırakılarak listelenecektir. Blog yazıları, makaleler veya kurumsal site içerikleri için en ideal kullanımdır.
<div class="container bg-light text-dark p-4">
<h2>Sabit Genişlikli Klasik Container</h2>
<p>Bu alan, ekran büyüdükçe (sm, md, lg, xl, xxl) belirli bir maksimum genişliğe ulaşarak ekranı ortalar. Sağdan ve soldan boşluklar oluşur.</p>
</div>
Örnek 2: Tam Genişlikli .container-fluid Kullanımı Bu kod bloğu, tarayıcınızın penceresini ne kadar büyütürseniz büyütün, ekranın uçtan uca dolmasını sağlayacaktır.
<div class="container-fluid bg-primary text-white p-4">
<h2>Tam Genişlikli (Akışkan) Container</h2>
<p>Bu container, cihazın ekranı ne kadar büyük veya küçük olursa olsun, ekran genişliğinin her zaman %100'ünü kaplar.</p>
</div>
Örnek 3: Duyarlı (Responsive) Kapsayıcı Kullanımı Bir e-ticaret sitesi tasarladığınızı düşünün. Mobilde ve tablette ürünlerin ekranı tam kaplamasını istiyorsunuz, ancak masaüstüne geçildiğinde içeriğin çok fazla uzamasını engelleyip merkeze almak istiyorsunuz. İşte .container-lg sınıfı tam bu işi yapar:
<div class="container-lg bg-success text-white p-4">
<h2>Large (lg) Ekranlara Kadar Tam Genişlik</h2>
<p>Sayfa genişliği 992px'in (lg) altında olduğu sürece bu alan ekranın %100'ünü kaplar. 992px'i geçtiği an, maksimum genişliği 960px olacak şekilde sayfanın tam ortasına yerleşir.</p>
</div>
Sıkça Sorulan Bir Soru: Container’lar İç İçe Kullanılır Mı?
Yeni başlayanların sıklıkla kafasını karıştıran bir konu, Container’ların iç içe (nested) kullanılıp kullanılamayacağıdır. Bootstrap belgelerinde belirtildiği üzere, Container’lar teknik olarak iç içe eklenebilir; ancak tasarımların büyük bir çoğunluğunda (layout) iç içe bir Container yapısına ihtiyaç duyulmaz.
Bunun yerine, en dışa bir tane .container koyup, içerisine grid sistemini ( .row ve .col sınıfları) yerleştirerek tüm ihtiyaçlarınızı kolaylıkla karşılayabilirsiniz.
Gelişmiş Özelleştirme: Sass ile Kendi Container Yapınızı Kurun
Eğer temel CSS ve HTML biliyorsanız Bootstrap’in standart sınıfları sizin için yeterli olacaktır. Ancak daha profesyonel bir projede çalışıyorsanız ve örneğin “Benim web sitem xxl ekranlarda 1320px değil de 1500px genişliğinde olsun” derseniz, Bootstrap 5’in arkasındaki güç olan Sass (SCSS) devreye girer.
Bootstrap, varsayılan container genişliklerini _variables.scss dosyasının içindeki $container-max-widths adlı Sass haritasında (map) tutar. Geliştiriciler bu dosyayı kendi projelerine dahil edip, bu değerleri projelerinin tasarım diline (UI/UX) göre tamamen değiştirebilir veya yeni ekran kırılma noktaları ekleyebilirler.
Özetle
Sitenizin mimarisini sağlam temeller üzerine kurmak, iyi bir kullanıcı deneyimi (UX) ve SEO performansı için kritik bir gerekliliktir. Bootstrap 5’in Container’ları; web sitenizin içeriğini düzene sokan, farklı ekran boyutlarında bozulmadan görüntülenmesini (responsive olmasını) sağlayan ve karmaşık CSS kodları yazma yükünü üzerinizden alan mucizevi taşıyıcılardır. Projelerinizde .container, .container-fluid veya duyarlı container’lardan uygun olanı seçerek, web geliştirme serüveninize harika bir başlangıç yapabilirsiniz!
