Container

Ne zaman kullanılır

Container, sayfa içeriğinin en geniş ölçüsünü sınırlamak ve ortalamak içindir. Sayfanın ana alanını ya da bir bölümün içeriğini sarar.

Ne zaman kullanılmaz

• Kutu ve dolgu için: Genişlik sınırı gerekmiyorsa Box kullanın.
• Öğeleri hizalamak için: Dizme için Stack, Inline ve Grid vardır; Container yalnızca genişliği sınırlar.
• İç içe: Bir Container’ın içine ikinci bir Container koymayın; iç boşluk iki kez uygulanır.

Anatomi

Container tek parçadır: <div> (ya da render ile verdiğiniz öğe).

1. Kök: max-width ile sınırlanır, mx-auto ile ortalanır, yatay iç boşluğu 16 px’tir; 1024 px ve üstünde 24 px olur.

Davranış

• Genişlik size ile seçilir: sm, md (varsayılan), lg ya da full.
• Kap sınırdan darsa Container kabın genişliğini alır (w-full).
• Yatay iç boşluk 1024 px görünüm genişliğinde 16 px’ten 24 px’e geçer (lg ayrım noktası).
• Hareket etmez, odak almaz.

Yönergeler

Genişliği içeriğe göre seçin

Metin örneği

YapınForm ve okunacak metin için dar boy (sm).

Metin örneği

YapmayınUzun metin için çok geniş boy: satırlar okunmaz uzar.

Genişliği className ile değiştirmeyin

className yalnızca blok kenar boşluğu ve dolgu içindir. Başka bir genişlik gerekiyorsa size değerini değiştirin.

İçerik

Container görünür bir metin taşımaz; içeriği çocuk bileşenler belirler. <main> için render kullanın ve sayfada bir tane tutun.

İlgili bileşenler

• Box: Genişlik sınırı olmayan genel kutu.
• Stack: İçeriği dikey diziler.
• Grid: İçeriği sütunlara böler.