Bootstrap Container Rehberi: container, container-fluid ve Duyarlı Container'lar

Container ne işe yarar?

Belgeler container'ları Bootstrap'in en temel yerleşim öğesi olarak tanımlar ve varsayılan grid sistemini kullanırken zorunlu olduklarını belirtir. Görevleri içindeki içeriği sarmak, yatayda dolgu vermek ve gerektiğinde ortalamaktır. Container'lar iç içe kullanılabilir, ancak belgelere göre çoğu düzen buna ihtiyaç duymaz. Grid tarafında .row öğesinin negatif yan boşlukları container'ın dolgusunu dengeler; container olmadan row kullanmanın neden sorun çıkardığını bu yazının gutter bölümünde göreceksiniz.

<div class="container">Sabit genişlikli: her kırılma noktasında max-width değişir</div>
<div class="container-fluid">Akışkan: her genişlikte %100</div>
<div class="container-md">768px'e kadar %100, sonra sabit genişlikli</div>

Genişlik tablosu

Aşağıdaki tablo, belgelerdeki karşılaştırmanın aynısıdır: her container türünün her kırılma noktasında aldığı en büyük genişlik. "%100" yazan hücrelerde container görüntü alanının tamamını kaplar, piksel değeri yazan hücrelerde ise bu değeri aşmaz ve yatay boşlukların otomatik olması sayesinde ortada durur.

Tablodan iki sonuç çıkar. Birincisi, .container ile .container-sm pratikte aynı davranır, çünkü ikisi de sm'den itibaren sabit genişliğe geçer. İkincisi, duyarlı türler arasındaki tek fark sabit genişliğin hangi kademede başladığıdır; başladıktan sonra hepsi aynı değerleri kullanır. Belgelerdeki grid örnek sayfası bu yedi türü alt alta göstererek farkı tarayıcıda görmenizi sağlar.

Varsayılan container

.container duyarlı ve sabit genişlikli bir kutudur; max-width değeri her kırılma noktasında değişir. xs kademesinde ise ekranın tamamını kaplar. Bootstrap 5.0.2 derlenmiş CSS dosyasında container kuralları şöyle tanımlıdır:

.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  width: 100%;
  padding-right: var(--bs-gutter-x, 0.75rem);
  padding-left: var(--bs-gutter-x, 0.75rem);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container-sm, .container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
  .container-md, .container-sm, .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px;
  }
}

Kuralları okuyunca davranışın nasıl kurulduğu netleşir. Tüm container türleri aynı temel kuralı paylaşır: width: 100%, iki yanda dolgu ve margin-right: auto ile margin-left: auto. Farkı medya sorguları yaratır: her sorgu, o kademede sabit genişliğe geçmesi gereken sınıfları listeler. 768px sorgusunda .container-md ilk kez görünür; bu yüzden .container-md 768px altında hiçbir max-width almaz ve %100 kalır. .container-fluid hiçbir sorguda yer almadığı için her genişlikte akışkandır.

Yan dolgu var(--bs-gutter-x, 0.75rem) ile verilir. Kök yazı boyutu 16px iken 0.75rem 12px eder. Bu değer Sass'taki $container-padding-x değişkeninden gelir; o da $grid-gutter-width değerinin (1.5rem) yarısıdır. --bs-gutter-x tanımlıysa dolgu bu değişkeni kullanır, tanımlı değilse yedek değer olan 0.75rem devreye girer. CSS değişkenlerinin yedek değer mantığı CSS değişkenleri ve var() yazısında.

Duyarlı container'lar

Duyarlı container'lar, belirli bir kırılma noktasına kadar %100 genişlikte kalıp o noktadan sonra her üst kademe için max-width alan sınıflardır. Belgelerin örneğine göre .container-sm sm kırılma noktasına ulaşılana kadar %100 genişliktedir, sonra md, lg, xl ve xxl ile birlikte büyür. Grid örnek sayfasındaki nota göre bu sınıflar Bootstrap v4.4'te eklendi, v5 de bunlara xxl kademesini kattı.

<div class="container-sm">sm kırılma noktasına kadar %100 genişlik</div>
<div class="container-md">md kırılma noktasına kadar %100 genişlik</div>
<div class="container-lg">lg kırılma noktasına kadar %100 genişlik</div>
<div class="container-xl">xl kırılma noktasına kadar %100 genişlik</div>
<div class="container-xxl">xxl kırılma noktasına kadar %100 genişlik</div>

Duyarlı container en çok, küçük ekranda içeriğin kenarlara kadar uzanmasını, geniş ekranda ise okunabilir bir genişlikte toplanmasını istediğiniz durumlarda işe yarar. Örneğin bir tablo ya da geniş bir form tablette tüm genişliği kullanabilsin ama masaüstünde ortada dursun istiyorsanız .container-lg iyi bir başlangıçtır.

Akışkan container

.container-fluid görüntü alanının tüm genişliğini kaplar. Yan dolgusu diğer container'larla aynıdır, yani içerik kenara yapışmaz, ancak hiçbir genişlikte sınırlandırılmaz. Yönetim panelleri gibi ekranın tamamını kullanması gereken düzenlerde tercih edilir; resmî dashboard örneği de ana iskeletinde container-fluid kullanır. Navbar belgesindeki örneklerin çoğu da navbar içinde container-fluid kullanır.

Adım adım: 1000px genişliğindeki bir pencerede ne olur?

Tabloyu somutlaştırmak için genişliği 1000px olan bir tarayıcı penceresi düşünün. Bu genişlik lg kademesine düşer, çünkü 992px'ten büyük, 1200px'ten küçüktür. .container, .container-sm, .container-md ve .container-lg 992px sorgusunda listelendiği için dördü de 960px genişlikte kalır; kalan 40px iki yana otomatik boşluk olarak bölünür ve kutu ortada durur. .container-xl ve .container-xxl henüz kendi sorgularına ulaşmadığı için %100 genişliktedir, .container-fluid da her zamanki gibi %100'dür. Bu üç akışkan kutuda içerik yine de kenara yapışmaz, çünkü her container iki yanda 0.75rem dolgu taşır. Pencereyi 1200px'e genişlettiğinizde .container-xl de 1140px'e sabitlenir, diğer sabit kutular 960px'ten 1140px'e büyür.

Hangi container'ı seçmeli?

Kenardan kenara arka plan, ortada içerik

Sık görülen bir ihtiyaç, renkli bir bandın ekranın bir ucundan öbür ucuna uzanması ama içindeki metnin diğer bölümlerle aynı hizada durmasıdır. Bunun için container'ı iç içe koymanız gerekmez: arka planı container'ı saran öğeye verir, içeriği container'a koyarsınız.

<header class="bg-dark text-white py-3">
  <div class="container">
    <span class="fs-4">Site adı</span>
  </div>
</header>

<section class="bg-light py-5">
  <div class="container">
    <h1 class="display-6">Arka plan kenardan kenara, içerik ortada</h1>
    <p class="lead mb-0">Renkli bant tam genişlikte, metin container genişliğinde durur.</p>
  </div>
</section>

<main class="container py-4">
  <div class="row">
    <div class="col-md-8">Ana içerik</div>
    <div class="col-md-4">Yan sütun</div>
  </div>
</main>

<div class="container-fluid">
  <div class="row">
    <div class="col-lg-3 bg-light">Yönetim paneli menüsü</div>
    <div class="col-lg-9">Geniş tablo alanı</div>
  </div>
</div>

Başlık ve tanıtım bandı tam genişlikte renklenir, içlerindeki .container metni ana içerikle aynı hizada tutar. Sayfanın sonundaki bölüm ise aynı fikrin akışkan hâlidir: container-fluid içindeki satır 992px'ten itibaren 3 ve 9 sütunluk iki parçaya bölünür ve her genişlikte ekranın tamamını kullanır. Sütun sınıfları grid sistemi, renk sınıfları renk sınıfları yazısında.

Container, row ve gutter ilişkisi

Container'ın yan dolgusu ile row'un negatif yan boşluğu birbirini dengeler. Derlenmiş CSS'te .row, --bs-gutter-x değişkenini 1.5rem olarak tanımlar ve iki yandan bu değerin yarısı kadar negatif boşluk alır; container'ın 0.75rem dolgusu bunu karşılar. Gutter belgesine göre .gx-* ile daha büyük yatay gutter kullandığınızda bu denge bozulabilir ve istenmeyen taşma oluşabilir. Belgelerin iki önerisi vardır: container'a eşleşen bir dolgu sınıfı, örneğin .px-4 eklemek ya da row'u .overflow-hidden sınıflı bir sarmalayıcıya almak. Dikey gutter (.gy-*) sayfanın sonunda row'un altında taşma yaratabildiği için onda da .overflow-hidden önerilir.

<div class="container px-4">
  <div class="row gx-5">
    <div class="col">Geniş yatay gutter</div>
    <div class="col">Container dolgusu artırıldı</div>
  </div>
</div>

<div class="container overflow-hidden">
  <div class="row gy-5">
    <div class="col-6">Dikey gutter</div>
    <div class="col-6">Taşan kısım gizlenir</div>
    <div class="col-6">Üçüncü öğe</div>
    <div class="col-6">Dördüncü öğe</div>
  </div>
</div>

Tamamen kenardan kenara bir tasarım istiyorsanız belgeler üst .container ya da .container-fluid öğesini kaldırmanızı söyler. Gutter sınıflarının tamamı gutter sınıfları: g, gx, gy yazısında.

Navbar içinde container

Geçiş belgesine göre v5'te navbar'lar içlerinde bir container ister; bu değişiklik boşluk gereksinimlerini ve gereken CSS'i sadeleştirmek için yapıldı. Navbar ve içeriği varsayılan olarak akışkandır; yatay genişliği sınırlamak için içteki container türünü değiştirirsiniz. Aşağıdaki sade örnekte marka bağlantısı, sayfanın geri kalanıyla aynı genişlikteki bir .container içinde durur. Navbar'ın tamamı navbar menü yapımı yazısında.

<nav class="navbar navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Marka</a>
  </div>
</nav>

Sass ile container genişliklerini değiştirmek

Hazır container sınıfları _variables.scss içindeki $container-max-widths map'inden üretilir. Varsayılan değerler sm için 540px, md için 720px, lg için 960px, xl için 1140px ve xxl için 1320px'tir. Map'i, Sass sayfasındaki kurala uygun olarak fonksiyonlardan sonra ve variables dosyasından önce yeniden tanımlarsınız. v5'te Sass map'leri varsayılanlarla otomatik birleştirilmediği için map'in tüm anahtarlarını yazmanız gerekir. Aşağıdaki SCSS resmî belgelerdeki kullanıma göre yazıldı; burada derlenmedi.

// custom.scss
@import "../node_modules/bootstrap/scss/functions";

// Varsayılan değerleri ezin: xxl kademesinde 1320px yerine 1240px
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1240px
);

@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";

Derleme sırasında _containers.scss, map'teki her kırılma noktası için bir .container-{kademe} sınıfı üretir ve her kademede o noktaya kadar olan tüm container sınıflarına aynı max-width değerini verir. Derlenmiş CSS'te her medya sorgusunun birden çok sınıfı listelemesinin nedeni budur. Kırılma noktalarını da değiştiriyorsanız $grid-breakpoints ile $container-max-widths anahtarlarının uyumlu olmasına dikkat edin; grid belgesindeki dört kademeli örnekte iki map birlikte değiştirilir.

make-container() ile kendi container'ınız

Hazır sınıfları değiştirmeden kendi container'ınızı yazmak için make-container() mixin'ini kullanırsınız. Belge sayfası mixin'in parametresini $padding-x adıyla gösterir; v5.0.2 kaynak kodundaki tanım ise parametreyi $gutter olarak adlandırır ve dolguyu --bs-gutter-x değişkeni üzerinden verir. Parametreyi adıyla geçirecekseniz kaynaktaki adı kullanın:

// scss/mixins/_container.scss (v5.0.2)
@mixin make-container($gutter: $container-padding-x) {
  width: 100%;
  padding-right: var(--#{$variable-prefix}gutter-x, #{$gutter});
  padding-left: var(--#{$variable-prefix}gutter-x, #{$gutter});
  margin-right: auto;
  margin-left: auto;
}

// Kendi kodunuz: Bootstrap içe aktarıldıktan sonra
.makale-govdesi {
  @include make-container();

  @include media-breakpoint-up(md) {
    max-width: 720px;
  }
}

// Grid belgesindeki örnek: genişliği mixin'den SONRA yazın
.example-container {
  @include make-container();
  width: 800px;
}

İlk örnek, yalnızca makale gövdesi için md'den itibaren 720px'te kalan dar bir container üretir. İkinci örnek grid belgesinden alındı; belgedeki yorum, mixin'in ürettiği width: 100% değerini ezmek için genişliği mixin çağrısından sonra yazmanızı hatırlatır.

Sık yapılan hatalar

• Row'u container olmadan kullanmak: Row'un negatif yan boşlukları dengelenmez ve sayfa yatayda taşabilir. Belgeler varsayılan grid için container'ı zorunlu sayar.
• Gereksiz yere container'ı iç içe koymak: İç içe container dolguyu ikiler. Tam genişlikte arka plan için dıştaki öğeye renk verip yalnızca içerde container kullanın.
• container-md'nin md altında da sabit genişlikte olmasını beklemek: Duyarlı container'lar belirtilen kademeye kadar %100 genişliktedir.
• Büyük gx-* ile taşma: Container'a eşleşen bir px-* dolgusu ekleyin ya da row'u overflow-hidden ile sarın.
• make-container() sonrası genişliği önce yazmak: Mixin width: 100% ürettiği için kendi genişliğinizi mixin'den sonra yazmalısınız.
• Map'i eksik anahtarla ezmek: v5'te map'ler varsayılanla birleştirilmez; yazmadığınız kademe için container sınıfı üretilmez.

Sık Sorulan Sorular

container ile container-fluid arasındaki fark nedir?

.container her kırılma noktasında bir max-width alır ve ortada durur; .container-fluid ise her genişlikte %100 kalır. İkisi de aynı yan dolguyu kullanır.

Container'ın yan boşluğu kaç piksel?

Varsayılan yan dolgu 0.75rem'dir; kök yazı boyutu 16px iken her iki yanda 12px eder. Değer $grid-gutter-width değişkeninin yarısından gelir.

Container genişliğini Sass olmadan değiştirebilir miyim?

Kendi stil dosyanızda .container için max-width kuralını ezebilirsiniz, ancak bunu her kırılma noktası için ayrı medya sorgusuyla yapmanız gerekir. Tutarlı bir değişiklik için $container-max-widths map'ini düzenleyip yeniden derlemek daha temizdir.

Her sayfada container kullanmak zorunlu mu?

Grid sistemini kullanıyorsanız belgeler container'ı zorunlu sayar. Kenardan kenara bir düzen istiyorsanız belgelerin önerisi üst container'ı kaldırmak, ancak o zaman row ve gutter davranışını kendiniz dengelemenizdir.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: Bootstrap öğrenme rehberi · Bootstrap breakpoint değerleri · Bootstrap grid sistemi · Bootstrap gutter sınıfları · CSS değişkenleri