Bootstrap Containers

Bootstrap’da container (konteyner), web sayfasında içerik düzenini oluşturmak için kullanılan temel yapıdır. Container’lar, Bootstrap grid sisteminin bir parçası olarak tasarlanmıştır ve içindeki öğelerin düzgün bir şekilde hizalanmasını sağlar. Bu yapı, web sayfası düzeninin duyarlı (responsive) ve tutarlı olmasını sağlar.

Bootstrap Container Türleri

Bootstrap’te 3 farklı türde container bulunmaktadır:

1. .container

• Duyarlı ve sabit genişlik sunar.
• Sayfa genişliğine göre farklı ekran boyutlarında genişlik değerini değiştirir.
• Mobil cihazlarda daha küçük, masaüstü cihazlarda daha geniş bir alan kaplar.

Örnek:

<div class="container">
  <h1>Bootstrap Container</h1>
  <p>Bu, sabit genişlikte bir konteynerdir.</p>
</div>

2. .container-fluid

• Tam genişlikte bir konteyner sağlar.
• Her ekran boyutunda tam genişlikte olur ve pencere genişliği kadar alan kaplar.
• Özellikle tam ekran tasarımlar için kullanılır.

Örnek:

<div class="container-fluid">
  <h1>Bootstrap Fluid Container</h1>
  <p>Bu, tam genişlikte bir konteynerdir.</p>
</div>

3. .container-{breakpoint}

• Belirli bir ekran boyutunda sabit genişlikte çalışır.
• Breakpoint (kırılma noktaları) değerleri: sm, md, lg, xl, xxl.
• Örneğin, .container-md sınıfı sadece md (768px) boyutundan itibaren sabit genişlikte çalışır, daha küçük ekranlarda ise tam genişlikte olur.

Örnek

<div class="container-md">
  <h1>Bootstrap Breakpoint Container</h1>
  <p>Bu konteyner, orta boyutlu ekranlarda sabit genişlikte çalışır.</p>
</div>

Container Kullanımının Önemi

Container’lar, Bootstrap grid sisteminin düzgün çalışması için gereklidir. Container’lar olmadan grid sistemi işlevsel olmayacaktır. Ayrıca, tasarımda hizalama ve düzenleme için güçlü bir yapı sunar.

Farklı Container Türlerini Birlikte Kullanma

Projelerde birden fazla container türü bir arada kullanılabilir.

Örnek:

<div class="container">
  <h1>Sabit Genişlikte Container</h1>
</div>

<div class="container-fluid bg-light">
  <h1>Fluid (Tam Genişlikte) Container</h1>
</div>

CSS ile Container Stilini Özelleştirme

Container’ları Bootstrap’in sunduğu varsayılan stillerle kullanabileceğiniz gibi, özelleştirme de yapabilirsiniz.

Örnek:

<style>
  .custom-container {
    background-color: #f8f9fa;
    border: 1px solid #ddd;
    padding: 20px;
  }
</style>

<div class="container custom-container">
  <h1>Özelleştirilmiş Container</h1>
  <p>Bu container'a özel bir stil uygulanmıştır.</p>
</div>

Container Kullanımında Dikkat Edilmesi Gerekenler

1. Grid sistemiyle uyumlu kullanın: Container’lar, Bootstrap grid sistemiyle birlikte çalışır.
2. Responsive tasarım: Projenizin ekran boyutlarına uyumlu olduğundan emin olun.
3. Doğru container seçimi: Sabit genişlik için .container, tam genişlik için .container-fluid, belirli kırılma noktaları için .container-{breakpoint} kullanın.