Bootstrap Container Nedir?
Bootstrap, web tasarımında en çok tercih edilen ve işimizi kolaylaştıran güçlü bir framework'tür. Container, sayfa içeriğinizin genişliğini sınırlayan, sayfanın sol ve sağ kenarlarından belirli bir mesafe bırakan bir yapı elemanıdır. Çoğunlukla, web sayfanızın düzenini düzenlemek ve içeriği merkezlemek için kullanılır.
"Container Not Centered" Hatası Ne Demek?
Birçok web geliştiricisi, Bootstrap kullanırken container'ı "center" (ortada) yapmak ister. Ancak bazen, container'ın her iki kenarında eşit boşluklar olmadığı ya da tamamen solda veya sağda hizalanmış olduğu görülür. Bu sorunun genellikle birkaç nedeni vardır.
Birçok kez, Bootstrap’ın varsayılan CSS stilini değiştiren kendi özel CSS kodlarımızı ekleriz. Bu kodlar, container’ın ortalanmasını engelleyebilir. Örneğin, kendi "margin" veya "padding" değerlerimiz, container’ın düzgün şekilde ortalanmamasına sebep olabilir.
# 2. Container’ı Sarma (Wrapper) Elemanları
Bootstrap’te container'ı bir başka elemanın içinde kullandığınızda, bu dış öğenin boyutları da container'ın hizalanmasını etkileyebilir. Yani, container’ınız doğru boyutlara sahip olsa bile, ona saran başka bir eleman ortalamayı bozabilir.
Birçok modern web tasarımında, "viewport" (görünür alan) ayarları önemli bir yer tutar. Özellikle mobil cihazlarda farklı cihaz boyutlarında responsive tasarım kullanıyorsanız, bu viewport ayarlarının eksik ya da hatalı olması, container’ın hizalanmasını etkileyebilir.
Container'ı Nasıl Ortalarım?
Şimdi gelelim çözüm kısmına! "Container not centered" sorununu çözmek için birkaç basit adım izleyebiliriz.
Flexbox, modern web tasarımında sıklıkla kullanılan bir düzenleme aracıdır. Container'ı yatay olarak ortalamak için aşağıdaki gibi bir CSS kodu ekleyebilirsiniz:
.container {
display: flex;
justify-content: center;
align-items: center;
}
Bu kod, container’ı hem yatayda hem de dikeyde ortalar. Flexbox'ın gücünü görmek işte böyle basit!
# Adım 2: Container’a Margin Auto Ekleme
Bir başka basit çözüm, margin özelliğini kullanarak container’ı ortalamaktır. Bootstrap’ın "container" sınıfına aşağıdaki gibi bir "margin" ekleyerek sorunu çözebilirsiniz:
.container {
margin-left: auto;
margin-right: auto;
}
Bu CSS kodu, container’ı otomatik olarak sağ ve soldan eşit şekilde yerleştirir. Çok basit ama etkili bir yöntemdir.
# Adım 3: Wrapper Elemanını Düzenlemek
Eğer container’ınız başka bir elemanın içine sarılmışsa ve bu dış eleman container’ın ortalanmasını engelliyorsa, o zaman wrapper elemanını da düzenlemelisiniz. O elemanın genişliğini ve hizalanmasını kontrol etmek oldukça önemlidir. İşte örnek bir çözüm:
.wrapper {
display: flex;
justify-content: center;
}
Bu şekilde, container’ı saracak olan wrapper elemanını ortalayarak, container’ın ortalanmasını sağlarsınız.
# Adım 4: Viewport Ayarlarını Kontrol Etmek
Mobil uyumlu bir tasarım yapıyorsanız, "viewport" ayarlarının doğru olduğundan emin olun. Aşağıdaki kodu HTML dosyanızın `` kısmına ekleyebilirsiniz:
Bu, sayfanın mobil cihazlarda düzgün bir şekilde görünmesini sağlar ve container’ın düzgün şekilde ortalanmasını sağlar.
