İşte Bootstrap margin (kenar boşluğu) sınıfları için bir özet tablo:
| Sınıf | Açıklama | Kod Örneği |
|---|---|---|
m-0 | Tüm kenarlar için 0 birim margin uygular. | html<br><div class="m-0">Margin: 0</div> |
m-1 | Tüm kenarlar için 1 birim margin uygular (genelde 0.25rem). | html<br><div class="m-1">Margin: 1</div> |
m-2 | Tüm kenarlar için 2 birim margin uygular (genelde 0.5rem). | html<br><div class="m-2">Margin: 2</div> |
m-3 | Tüm kenarlar için 3 birim margin uygular (genelde 1rem). | html<br><div class="m-3">Margin: 3</div> |
m-4 | Tüm kenarlar için 4 birim margin uygular (genelde 1.5rem). | html<br><div class="m-4">Margin: 4</div> |
m-5 | Tüm kenarlar için 5 birim margin uygular (genelde 3rem). | html<br><div class="m-5">Margin: 5</div> |
mt-* | Yalnızca üst kenar için belirli bir margin uygular. | html<br><div class="mt-3">Üst Margin: 3</div> |
mb-* | Yalnızca alt kenar için belirli bir margin uygular. | html<br><div class="mb-3">Alt Margin: 3</div> |
ml-* | Yalnızca sol kenar için belirli bir margin uygular. | html<br><div class="ml-3">Sol Margin: 3</div> |
mr-* | Yalnızca sağ kenar için belirli bir margin uygular. | html<br><div class="mr-3">Sağ Margin: 3</div> |
m-* sınıfları tüm kenarlara, mt-*, mb-*, ml-*, mr-* ise sadece belirli bir kenara uygulanır.rem veya px) kullanmak isterseniz, stil özelliklerini doğrudan style ile yazabilirsiniz.İşte Bootstrap padding (dolgu) sınıfları için özet bir tablo:
| Sınıf | Açıklama | Kod Örneği |
|---|---|---|
p-0 | Tüm kenarlardan padding (dolgu) 0 piksel. | html<br><div class="p-0" style="background: #ddd;">Padding: 0</div> |
p-1 | Tüm kenarlardan padding 0.25rem (4 piksel). | html<br><div class="p-1" style="background: #ddd;">Padding: 0.25rem</div> |
p-2 | Tüm kenarlardan padding 0.5rem (8 piksel). | html<br><div class="p-2" style="background: #ddd;">Padding: 0.5rem</div> |
p-3 | Tüm kenarlardan padding 1rem (16 piksel). | html<br><div class="p-3" style="background: #ddd;">Padding: 1rem</div> |
p-4 | Tüm kenarlardan padding 1.5rem (24 piksel). | html<br><div class="p-4" style="background: #ddd;">Padding: 1.5rem</div> |
p-5 | Tüm kenarlardan padding 3rem (48 piksel). | html<br><div class="p-5" style="background: #ddd;">Padding: 3rem</div> |
pt-0 | Yalnızca üst kenardan padding 0 piksel. | html<br><div class="pt-0" style="background: #ddd;">Üst Padding: 0</div> |
pt-1 | Yalnızca üst kenardan padding 0.25rem. | html<br><div class="pt-1" style="background: #ddd;">Üst Padding: 0.25rem</div> |
pt-2 | Yalnızca üst kenardan padding 0.5rem. | html<br><div class="pt-2" style="background: #ddd;">Üst Padding: 0.5rem</div> |
pb-0 | Yalnızca alt kenardan padding 0 piksel. | html<br><div class="pb-0" style="background: #ddd;">Alt Padding: 0</div> |
pl-1 | Yalnızca sol kenardan padding 0.25rem. | html<br><div class="pl-1" style="background: #ddd;">Sol Padding: 0.25rem</div> |
pr-5 | Yalnızca sağ kenardan padding 3rem. | html<br><div class="pr-5" style="background: #ddd;">Sağ Padding: 3rem</div> |
p-* sınıfları: Tüm kenarlara uygulanır.pt-*, pb-*, pl-*, pr-* sınıfları: Sadece belirtilen kenara uygulanır.t: Top (Üst)b: Bottom (Alt)l: Left (Sol)r: Right (Sağ)0: 0px1: 4px (0.25rem)2: 8px (0.5rem)3: 16px (1rem)4: 24px (1.5rem)5: 48px (3rem)İşte Bootstrap yazı boyutu sınıfları (fs-*) için bir tablo:
| Sınıf | Açıklama | Kod Örneği |
|---|---|---|
fs-1 | En büyük yazı boyutu, genellikle başlıklar için kullanılır. | html<br><p class="fs-1">Bu, en büyük yazı boyutudur.</p> |
fs-2 | Büyük yazı boyutu, alt başlıklar veya vurgu için uygundur. | html<br><p class="fs-2">Bu, büyük bir yazı boyutudur.</p> |
fs-3 | Orta büyüklükte yazı boyutu, standart başlıklar için ideal. | html<br><p class="fs-3">Bu, orta bir yazı boyutudur.</p> |
fs-4 | Normal bir yazı boyutu, paragraf metinleri için kullanılabilir. | html<br><p class="fs-4">Bu, normal bir yazı boyutudur.</p> |
fs-5 | Hafifçe küçültülmüş yazı boyutu, yardımcı metinler için uygun. | html<br><p class="fs-5">Bu, küçük bir yazı boyutudur.</p> |
fs-6 | Daha küçük bir yazı boyutu, notlar veya ikincil bilgiler için kullanılır. | html<br><p class="fs-6">Bu, daha küçük bir yazı boyutudur.</p> |
fs-7 | Oldukça küçük bir yazı boyutu, çok az kullanılan detaylar için uygundur. | html<br><p class="fs-7">Bu, oldukça küçük bir yazı boyutudur.</p> |
fs-8 | Çok küçük yazı boyutu, sadece en küçük detaylar için kullanılır. | html<br><p class="fs-8">Bu, çok küçük bir yazı boyutudur.</p> |
fs-9 | En küçük yazı boyutlarından biri, genellikle sembolik ifadeler veya açıklamalar için uygundur. | html<br><p class="fs-9">Bu, en küçük yazı boyutlarından biridir.</p> |
fs-10 | En küçük yazı boyutu, nadiren kullanılır ve çok küçük alanlarda tercih edilir. | html<br><p class="fs-10">Bu, en küçük yazı boyutudur.</p> |
fs-1 ile fs-6 arası genellikle tasarımlarda daha sık tercih edilir.fs-7 ve sonrası çok küçük metinler için özel durumlarda kullanılır.İşte Bootstrap görsel düzenleme sınıfları için bir özet tablo:
| Sınıf | Açıklama | Kod Örneği |
|---|---|---|
d-none | Elemanı tamamen gizler. | html<br><div class="d-none">Gizli Eleman</div> |
d-block | Elemanı blok seviyesinde yerleştirir, yani tüm satırı kaplar. | html<br><div class="d-block">Blok Eleman</div> |
d-inline | Elemanı satır içi olarak yerleştirir, yani sadece ihtiyacı kadar yer kaplar. | html<br><span class="d-inline">Satır İçi Eleman</span> |
d-inline-block | Elemanı satır içi blok olarak yerleştirir, yani satır içinde yer kaplar, ancak blok özellikleri gösterir. | html<br><div class="d-inline-block">Satır İçi Blok</div> |
d-flex | Elemanı flex konteyneri yapar, esnek düzen sağlar. | html<br><div class="d-flex">Flex Konteyneri</div> |
d-inline-flex | Elemanı satır içi flex konteyneri yapar. Aynı satırda yer alacak şekilde flex düzeni uygular. | html<br><div class="d-inline-flex">Satır İçi Flex Konteyneri</div> |
d-grid | Elemanı grid konteyneri yapar, 2D grid düzeni sağlar. | html<br><div class="d-grid">Grid Konteyneri</div> |
d-inline-grid | Elemanı satır içi grid konteyneri yapar, 2D grid düzeni uygular, ancak satır içinde yer kaplar. | html<br><div class="d-inline-grid">Satır İçi Grid Konteyneri</div> |
d-table | Elemanı tablo düzeneği ile yerleştirir. Tablo gibi davranır, ancak görsel olarak tabloyu belirtir. | html<br><div class="d-table">Tablo Elemanı</div> |
d-table-row | Elemanı tablo satırı düzeneğinde yerleştirir. Tablo satırı gibi davranır. | html<br><div class="d-table-row">Tablo Satırı</div> |
d-table-cell | Elemanı tablo hücresi düzeneğinde yerleştirir. Tablo hücresi gibi davranır. | html<br><div class="d-table-cell">Tablo Hücresi</div> |
d-flex-column | Elemanı flex düzeninde, kolon (column) yönünde yerleştirir. | html<br><div class="d-flex d-flex-column">Flex Kolon</div> |
d-flex-column-reverse | Elemanı flex düzeninde, ters kolon (column-reverse) yönünde yerleştirir. | html<br><div class="d-flex d-flex-column-reverse">Flex Ters Kolon</div> |
d-none: Elemanı tamamen gizler.d-block: Elemanı bir blok seviyesinde yerleştirir, tam satır kaplar.d-inline: Elemanı satır içi olarak yerleştirir, sadece gerekli kadar yer kaplar.d-inline-block: Elemanı satır içinde blok özellikleri gösterir.d-flex: Elemanı flex konteyneri yapar, esnek düzen sağlar.d-inline-flex: Elemanı satır içi flex konteyneri yapar.d-grid: Elemanı grid konteyneri yapar, 2D grid düzeni sağlar.d-inline-grid: Elemanı satır içi grid konteyneri yapar.d-table: Elemanı tablo düzeneğine sokar.d-table-row: Elemanı tablo satırı düzeneğine sokar.d-table-cell: Elemanı tablo hücresi düzeneğine sokar.d-flex-column: Elemanı flex düzeninde kolon (vertical) olarak yerleştirir.d-flex-column-reverse: Elemanı flex düzeninde ters kolon (vertical-reverse) olarak yerleştirir.Bu sınıflar, görsel düzenleme yaparken (örneğin; flexbox, grid veya blok düzeneği) kullanılan temel araçlardır.
İşte Bootstrap Grid Gaps (Boşluklar) için g-0, g-1, g-2, g-3, g-4, g-5 ve gx-0, gx-1, gx-2, gx-3, gx-4, gx-5 ile gy-0, gy-1, gy-2, gy-3, gy-4, gy-5 sınıfları hakkında özet bir tablo:
| Pozisyon Sınıfı | Açıklama | Kod Örneği |
|---|---|---|
g-0 | Tüm yönlerde (hem yatay hem dikey) boşluk (gap) sıfır (0) yapar. | html<br><div class="row g-0"> <div class="col">Kolon 1</div> <div class="col">Kolon 2</div> </div> |
g-1 | Tüm yönlerde (hem yatay hem dikey) boşluk (gap) 0.25rem yapar. | html<br><div class="row g-1"> <div class="col">Kolon 1</div> <div class="col">Kolon 2</div> </div> |
g-2 | Tüm yönlerde (hem yatay hem dikey) boşluk (gap) 0.5rem yapar. | html<br><div class="row g-2"> <div class="col">Kolon 1</div> <div class="col">Kolon 2</div> </div> |
g-3 | Tüm yönlerde (hem yatay hem dikey) boşluk (gap) 1rem yapar. | html<br><div class="row g-3"> <div class="col">Kolon 1</div> <div class="col">Kolon 2</div> </div> |
g-4 | Tüm yönlerde (hem yatay hem dikey) boşluk (gap) 1.5rem yapar. | html<br><div class="row g-4"> <div class="col">Kolon 1</div> <div class="col">Kolon 2</div> </div> |
g-5 | Tüm yönlerde (hem yatay hem dikey) boşluk (gap) 3rem yapar. | html<br><div class="row g-5"> <div class="col">Kolon 1</div> <div class="col">Kolon 2</div> </div> |
gx-0 | Yalnızca yatay boşluğu sıfırlar. Yatayda boşluk (gap) yoktur. | html<br><div class="row gx-0"> <div class="col">Kolon 1</div> <div class="col">Kolon 2</div> </div> |
gx-1 | Yalnızca yatay boşluğu 0.25rem yapar. Yatayda 0.25rem boşluk. | html<br><div class="row gx-1"> <div class="col">Kolon 1</div> <div class="col">Kolon 2</div> </div> |
gx-2 | Yalnızca yatay boşluğu 0.5rem yapar. Yatayda 0.5rem boşluk. | html<br><div class="row gx-2"> <div class="col">Kolon 1</div> <div class="col">Kolon 2</div> </div> |
gx-3 | Yalnızca yatay boşluğu 1rem yapar. Yatayda 1rem boşluk. | html<br><div class="row gx-3"> <div class="col">Kolon 1</div> <div class="col">Kolon 2</div> </div> |
gx-4 | Yalnızca yatay boşluğu 1.5rem yapar. Yatayda 1.5rem boşluk. | html<br><div class="row gx-4"> <div class="col">Kolon 1</div> <div class="col">Kolon 2</div> </div> |
gx-5 | Yalnızca yatay boşluğu 3rem yapar. Yatayda 3rem boşluk. | html<br><div class="row gx-5"> <div class="col">Kolon 1</div> <div class="col">Kolon 2</div> </div> |
gy-0 | Yalnızca dikey boşluğu sıfırlar. Dikeyde boşluk (gap) yoktur. | html<br><div class="row gy-0"> <div class="col">Kolon 1</div> <div class="col">Kolon 2</div> </div> |
gy-1 | Yalnızca dikey boşluğu 0.25rem yapar. Dikeyde 0.25rem boşluk. | html<br><div class="row gy-1"> <div class="col">Kolon 1</div> <div class="col">Kolon 2</div> </div> |
gy-2 | Yalnızca dikey boşluğu 0.5rem yapar. Dikeyde 0.5rem boşluk. | html<br><div class="row gy-2"> <div class="col">Kolon 1</div> <div class="col">Kolon 2</div> </div> |
gy-3 | Yalnızca dikey boşluğu 1rem yapar. Dikeyde 1rem boşluk. | html<br><div class="row gy-3"> <div class="col">Kolon 1</div> <div class="col">Kolon 2</div> </div> |
gy-4 | Yalnızca dikey boşluğu 1.5rem yapar. Dikeyde 1.5rem boşluk. | html<br><div class="row gy-4"> <div class="col">Kolon 1</div> <div class="col">Kolon 2</div> </div> |
gy-5 | Yalnızca dikey boşluğu 3rem yapar. Dikeyde 3rem boşluk. | html<br><div class="row gy-5"> <div class="col">Kolon 1</div> <div class="col">Kolon 2</div> </div> |
g-0 - g-5: Hem yatay hem dikey boşlukları ayarlamak için kullanılır.gx-0 - gx-5: Yalnızca yatay boşluğu ayarlamak için kullanılır.gy-0 - gy-5: Yalnızca dikey boşluğu ayarlamak için kullanılır.Bu sınıflar, her bir boşluk seviyesini hızlıca ayarlamak için çok kullanışlıdır.
İşte Bootstrap metin hizalama sınıfları için bir özet tablo:
| Sınıf | Açıklama | Kod Örneği |
|---|---|---|
text-start | Metni sola hizalar (sola dayalı hizalama). Bu, varsayılan hizalama şeklidir. | html<br><p class="text-start">Sola Hizalanmış Metin</p> |
text-center | Metni ortalar. | html<br><p class="text-center">Ortalanmış Metin</p> |
text-end | Metni sağa hizalar (sağa dayalı hizalama). | html<br><p class="text-end">Sağa Hizalanmış Metin</p> |
text-justify | Metni her iki kenara dayalı olarak hizalar, metnin her satırı arasındaki boşluğu eşitler. | html<br><p class="text-justify">Bu metin, her iki kenara hizalanarak düzeltilmiş bir paragraftır.</p> |
text-nowrap | Metnin satır içinde kırılmasını engeller; tüm metin tek satırda yer alır. | html<br><p class="text-nowrap">Bu metin, satır kırılmasını engeller ve tek satırda kalır.</p> |
Bu tablo, metin hizalama sınıflarının nasıl çalıştığını ve her birinin kullanım amacını açıklayan basit HTML örnekleri sunuyor.
İşte Bootstrap arka plan renk sınıfları için bir özet tablo:
| Arka Plan Renk Sınıfı | Açıklama | Kod Örneği |
|---|---|---|
bg-primary | Temel (birincil) renk, genellikle markanın ana rengi olarak kullanılır. | html<br><div class="bg-primary text-white">Birincil Arka Plan</div> |
bg-secondary | İkinci dereceden renk, genellikle ikincil vurgular veya yardımcı renkler için kullanılır. | html<br><div class="bg-secondary text-white">İkincil Arka Plan</div> |
bg-success | Başarıyı temsil eden yeşil renk. Genellikle olumlu durumlar için kullanılır. | html<br><div class="bg-success text-white">Başarı Arka Planı</div> |
bg-danger | Tehlikeyi temsil eden kırmızı renk. Genellikle olumsuz durumlar veya uyarılar için kullanılır. | html<br><div class="bg-danger text-white">Tehlike Arka Planı</div> |
bg-warning | Uyarıyı temsil eden sarı renk. Genellikle dikkat edilmesi gereken durumlar için kullanılır. | html<br><div class="bg-warning text-dark">Uyarı Arka Planı</div> |
bg-info | Bilgi veren mavi renk. Genellikle bilgi ya da dikkatli inceleme gerektiren durumlar için kullanılır. | html<br><div class="bg-info text-white">Bilgi Arka Planı</div> |
bg-light | Hafif (açık) renk, genellikle arka planlarda kullanılan açık tonlar. | html<br><div class="bg-light text-dark">Açık Arka Plan</div> |
bg-dark | Koyu renk, genellikle koyu arka planlar için kullanılır. | html<br><div class="bg-dark text-white">Koyu Arka Plan</div> |
bg-muted | Soluk (gri tonlarında) renk. Genellikle daha az dikkat çekici içerikler için kullanılır. | html<br><div class="bg-muted text-dark">Soluk Arka Plan</div> |
bg-white | Beyaz arka plan. Genellikle temel veya temiz bir görünüm sağlamak için kullanılır. | html<br><div class="bg-white text-dark">Beyaz Arka Plan</div> |
bg-transparent | Şeffaf arka plan. Elemanın arka planı görünmez olur, ancak içerik hala vardır. | html<br><div class="bg-transparent text-dark">Şeffaf Arka Plan</div> |
Bu tablo, Bootstrap'in çeşitli arka plan renk sınıflarını ve kullanım amacını açıklar. Kod örnekleriyle her birinin nasıl göründüğünü ve hangi durumlar için uygun olduğunu test edebilirsiniz.
İşte Bootstrap border sınıfları için bir özet tablo:
| Sınıf | Açıklama | Kod Örneği |
|---|---|---|
border | Elemanın tüm kenarlarına sınır ekler. | html<br><div class="border">Tüm Kenarlarda Sınır</div> |
border-top | Yalnızca üst kenara sınır ekler. | html<br><div class="border-top">Üst Kenarda Sınır</div> |
border-end | Sağ kenara (yönlü yazımda sağ taraf) sınır ekler. | html<br><div class="border-end">Sağ Kenarda Sınır</div> |
border-bottom | Alt kenara sınır ekler. | html<br><div class="border-bottom">Alt Kenarda Sınır</div> |
border-start | Sol kenara (yönlü yazımda sol taraf) sınır ekler. | html<br><div class="border-start">Sol Kenarda Sınır</div> |
border-0 | Tüm kenarlardaki sınırları kaldırır. | html<br><div class="border-0">Kenarsız Eleman</div> |
border-primary | Birincil renk temasıyla sınır ekler. | html<br><div class="border border-primary">Birincil Renk Sınır</div> |
border-secondary | İkincil renk temasıyla sınır ekler. | html<br><div class="border border-secondary">İkincil Renk Sınır</div> |
border-success | Başarı (yeşil) temasıyla sınır ekler. | html<br><div class="border border-success">Başarı Renk Sınır</div> |
border-danger | Tehlike (kırmızı) temasıyla sınır ekler. | html<br><div class="border border-danger">Tehlike Renk Sınır</div> |
border-warning | Uyarı (sarı) temasıyla sınır ekler. | html<br><div class="border border-warning">Uyarı Renk Sınır</div> |
border-info | Bilgi (mavi) temasıyla sınır ekler. | html<br><div class="border border-info">Bilgi Renk Sınır</div> |
border-light | Açık renk temasıyla sınır ekler. | html<br><div class="border border-light">Açık Renk Sınır</div> |
border-dark | Koyu renk temasıyla sınır ekler. | html<br><div class="border border-dark">Koyu Renk Sınır</div> |
border: Elemanın tüm kenarlarına sınır ekler.border-top, border-end, border-bottom, border-start: Belirli kenarlara sınır ekler.border-0: Kenarsız bir eleman oluşturur (sınırları kaldırır).border-* (renk sınıfları): Renk temasına göre sınır ekler (primary, secondary, success, danger, warning, info, light, dark).Bu sınıflar, elemanların sınırlarını özelleştirmek için kullanılır ve hızlıca farklı kenarlara renkli sınırlar eklemek için pratik bir yöntem sunar.
İşte Bootstrap 4 ve 5'te kullanılan yuvarlama (border-radius) sınıfları için bir özet tablo:
| Pozisyon Sınıfı | Açıklama | Kod Örneği |
|---|---|---|
rounded | Varsayılan yuvarlama. Elemanın köşelerini hafifçe yuvarlar. | html<br><img src="image.jpg" class="rounded" alt="Yuvarlanmış Köşe"> |
rounded-circle | Elemanı tam bir daireye dönüştürür (genellikle kare görüntüler için). | html<br><img src="image.jpg" class="rounded-circle" alt="Daire Şeklinde"> |
rounded-0 | Köşeleri tamamen kare yapar (yuvarlama yok). | html<br><img src="image.jpg" class="rounded-0" alt="Keskin Köşe"> |
rounded-1 | Küçük yuvarlama uygulanır. | html<br><img src="image.jpg" class="rounded-1" alt="Küçük Yuvarlama"> |
rounded-2 | Orta büyüklükte yuvarlama uygulanır. | html<br><img src="image.jpg" class="rounded-2" alt="Orta Yuvarlama"> |
rounded-3 | Daha büyük yuvarlama uygulanır. | html<br><img src="image.jpg" class="rounded-3" alt="Büyük Yuvarlama"> |
rounded-lg | Büyük boyutlu yuvarlama uygulanır (daha belirgin köşe yuvarlaması). | html<br><img src="image.jpg" class="rounded-lg" alt="Büyük Yuvarlama"> |
rounded-sm | Küçük boyutlu yuvarlama uygulanır (daha ince yuvarlama). | html<br><img src="image.jpg" class="rounded-sm" alt="Küçük Yuvarlama"> |
rounded-pill | Elemanı bir kapsül şeklinde yuvarlar. | html<br><img src="image.jpg" class="rounded-pill" alt="Pill Şeklinde"> |
rounded: Varsayılan yuvarlama, hafif köşe yuvarlaması.rounded-circle: Daire şeklinde köşeler (genellikle kare elemanlar için).rounded-0: Köşeleri tamamen keskin yapar.rounded-1, rounded-2, rounded-3: Farklı seviyelerde yuvarlama.rounded-lg: Büyük yuvarlama.rounded-sm: Küçük yuvarlama.rounded-pill: Pill şeklinde yuvarlama, genellikle butonlar veya etiketler için kullanılır.Bu sınıflar, özellikle görsel öğeler (resimler, butonlar) için yaygın olarak kullanılır.
İşte Bootstrap genişlik sınıfları (w-25, w-50, w-75, w-100, w-auto) için bir özet tablo:
| Genişlik Sınıfı | Açıklama | Kod Örneği |
|---|---|---|
w-25 | Elemanın genişliğini %25 olarak ayarlar. | html<br><div class="w-25" style="background-color: lightblue;">%25 Genişlik</div> |
w-50 | Elemanın genişliğini %50 olarak ayarlar. | html<br><div class="w-50" style="background-color: lightgreen;">%50 Genişlik</div> |
w-75 | Elemanın genişliğini %75 olarak ayarlar. | html<br><div class="w-75" style="background-color: lightcoral;">%75 Genişlik</div> |
w-100 | Elemanın genişliğini %100 olarak ayarlar (tam genişlik). | html<br><div class="w-100" style="background-color: lightyellow;">%100 Genişlik</div> |
w-auto | Elemanın genişliğini, içeriğine göre otomatik olarak ayarlar. | html<br><div class="w-auto" style="background-color: lightgray;">Otomatik Genişlik</div> |
w-25: Elemanın genişliği %25 olarak ayarlanır. Yani, ebeveyninin dörtte biri kadar genişlik kaplar.w-50: Elemanın genişliği %50 olarak ayarlanır. Yani, ebeveyninin yarısı kadar genişlik kaplar.w-75: Elemanın genişliği %75 olarak ayarlanır. Yani, ebeveyninin üçte biri kadar genişlik kaplar.w-100: Elemanın genişliği %100 olarak ayarlanır. Yani, ebeveyninin tamamını kaplar.w-auto: Elemanın genişliği içeriğine göre otomatik olarak ayarlanır. İçeriğin boyutuna göre genişlik belirlenir.Bu sınıflar, bir öğenin genişliğini hızlıca ayarlamak için kullanılır. Kendi içeriklerine göre veya yüzdeye dayalı genişlikler için yaygın olarak kullanılırlar.
İşte Bootstrap yükseklik sınıfları için bir özet tablo:
| Yükseklik Sınıfı | Açıklama | Kod Örneği |
|---|---|---|
h-25 | Elemanın yüksekliğini %25 olarak ayarlar. | html<br><div class="h-25" style="background-color: lightblue;">Yükseklik %25</div> |
h-50 | Elemanın yüksekliğini %50 olarak ayarlar. | html<br><div class="h-50" style="background-color: lightgreen;">Yükseklik %50</div> |
h-75 | Elemanın yüksekliğini %75 olarak ayarlar. | html<br><div class="h-75" style="background-color: lightcoral;">Yükseklik %75</div> |
h-100 | Elemanın yüksekliğini %100 olarak ayarlar. | html<br><div class="h-100" style="background-color: lightgoldenrodyellow;">Yükseklik %100</div> |
h-auto | Elemanın yüksekliğini içeriğine göre otomatik ayarlar (içerik kadar yüksek olur). | html<br><div class="h-auto" style="background-color: lightpink;">Otomatik Yükseklik</div> |
Bu sınıflar, elemanların yüksekliğini belirli yüzdelik oranlarda veya otomatik olarak ayarlamak için kullanılır. h-auto, içeriğe göre boyutlanır, diğerleri belirli oranlarla yüksekliği ayarlar.
İşte Bootstrap pozisyon sınıfları için bir özet tablo:
| Pozisyon Sınıfı | Açıklama | Kod Örneği |
|---|---|---|
position-static | Varsayılan konumlandırma. Eleman normal akışında yer alır, kaydırılamaz. | html<br><div class="position-static">Normal Konum</div> |
position-relative | Eleman normal akışında yer alır, ancak top, left, right, bottom ile kaydırılabilir. | html<br><div class="position-relative" style="top: 10px; left: 10px;">Göreceli Konum</div> |
position-absolute | Eleman normal akıştan çıkarılır, en yakın konumlandırılmış ebeveyne göre yerleştirilir. | html<br><div class="position-relative"> <div class="position-absolute" style="top: 0; right: 0;">Üst Sağ</div> </div> |
position-fixed | Eleman belgeye göre konumlanır ve kaydırma sırasında sabit kalır. | html<br><div class="position-fixed" style="bottom: 10px; right: 10px;">Sabit Eleman</div> |
position-sticky | Eleman normal akışında yer alır, kaydırıldığında belirli bir pozisyona yapışır. | html<br><div style="height: 200px; overflow-y: scroll;"> <div class="position-sticky" style="top: 0;">Yapışkan Başlık</div> </div> |
Bu tablo, her sınıfın nasıl çalıştığını açıklarken basit bir HTML örneğiyle pekiştiriyor. Kod örneklerini çalıştırarak sınıfların davranışlarını daha iyi anlayabilirsiniz!
İşte Bootstrap'ın flex sınıfları için açıklamalar ve örnek kodlarla birlikte bir tablo:
| Sınıf | Açıklama | Kod Örneği |
|---|---|---|
d-flex | Elemanı flex container yapar. İçindeki öğeler flex davranışını alır. | html<br><div class="d-flex"> <div>1</div> <div>2</div> </div> |
flex-row | Flex yönünü yatay (satır) olarak ayarlar (varsayılan). | html<br><div class="d-flex flex-row"> <div>1</div> <div>2</div> </div> |
flex-column | Flex yönünü dikey (sütun) olarak ayarlar. | html<br><div class="d-flex flex-column"> <div>1</div> <div>2</div> </div> |
flex-wrap | Flex öğelerinin birden fazla satıra taşmasına izin verir. | html<br><div class="d-flex flex-wrap"> <div style="width: 150px;">1</div> <div style="width: 150px;">2</div> <div style="width: 150px;">3</div> </div> |
flex-nowrap | Flex öğelerinin tek satırda kalmasını zorunlu kılar (varsayılan). | html<br><div class="d-flex flex-nowrap"> <div>1</div> <div>2</div> </div> |
flex-grow-1 | Flex öğesinin mevcut boş alanı doldurmasını sağlar. | html<br><div class="d-flex"> <div class="flex-grow-1">Büyü</div> <div>Sabit</div> </div> |
flex-shrink-0 | Flex öğesinin boyutunu küçültmesini engeller. | html<br><div class="d-flex"> <div class="flex-shrink-0" style="width: 200px;">Küçülmez</div> <div>Esnek</div> </div> |
justify-content-center | Flex öğelerini yatayda ortalar. | html<br><div class="d-flex justify-content-center"> <div>Ortada</div> </div> |
align-items-center | Flex öğelerini dikeyde ortalar. | html<br><div class="d-flex align-items-center" style="height: 100px;"> <div>Dikey Ortada</div> </div> |
d-flex): Flex özellikleri kullanabilmek için bir kapsayıcı gereklidir.flex-row, flex-column): Öğelerin yatay veya dikey hizalanmasını kontrol eder.flex-wrap, flex-nowrap, flex-grow, flex-shrink): Öğelerin boş alan ve taşma davranışını kontrol eder.justify-content-*, align-items-*): İçerikleri yatayda veya dikeyde hizalar.Kodları tarayıcıda çalıştırarak her sınıfın nasıl davrandığını deneyebilirsiniz!
İşte Bootstrap veya Tailwind CSS'de sıklıkla kullanılan grid ve boşluk sınıfları için bir özet tablo:
| Sınıf | Açıklama | Kod Örneği |
|---|---|---|
| Grid Düzeni | ||
grid | Bir elemanı grid konteyneri yapar, alt elemanlar grid sistemine göre düzenlenir. | html<br><div class="grid">Grid Konteyner</div> |
grid-cols-1 | Grid, 1 sütun içerir. | html<br><div class="grid grid-cols-1"> <div>1</div> <div>2</div> </div> |
grid-cols-2 | Grid, 2 sütun içerir. | html<br><div class="grid grid-cols-2"> <div>1</div> <div>2</div> </div> |
grid-cols-3 | Grid, 3 sütun içerir. | html<br><div class="grid grid-cols-3"> <div>1</div> <div>2</div> <div>3</div> </div> |
grid-cols-4 | Grid, 4 sütun içerir. | html<br><div class="grid grid-cols-4"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> |
grid-rows-1 | Grid, 1 satır içerir. | html<br><div class="grid grid-rows-1"> <div>1</div> </div> |
grid-rows-2 | Grid, 2 satır içerir. | html<br><div class="grid grid-rows-2"> <div>1</div> <div>2</div> </div> |
grid-rows-3 | Grid, 3 satır içerir. | html<br><div class="grid grid-rows-3"> <div>1</div> <div>2</div> <div>3</div> </div> |
| Boşluk Yönetimi | ||
gap-0 | Elemanlar arasında hiç boşluk bırakmaz. | html<br><div class="grid gap-0 grid-cols-2"> <div>1</div> <div>2</div> </div> |
gap-1 | Elemanlar arasında küçük bir boşluk bırakır. | html<br><div class="grid gap-1 grid-cols-2"> <div>1</div> <div>2</div> </div> |
gap-2 | Elemanlar arasında orta boy bir boşluk bırakır. | html<br><div class="grid gap-2 grid-cols-2"> <div>1</div> <div>2</div> </div> |
gap-3 | Elemanlar arasında daha büyük bir boşluk bırakır. | html<br><div class="grid gap-3 grid-cols-2"> <div>1</div> <div>2</div> </div> |
gap-4 | Elemanlar arasında daha da büyük bir boşluk bırakır. | html<br><div class="grid gap-4 grid-cols-2"> <div>1</div> <div>2</div> </div> |
gap-5 | Elemanlar arasında büyükçe bir boşluk bırakır. | html<br><div class="grid gap-5 grid-cols-2"> <div>1</div> <div>2</div> </div> |
gap-6 | Elemanlar arasında oldukça büyük bir boşluk bırakır. | html<br><div class="grid gap-6 grid-cols-2"> <div>1</div> <div>2</div> </div> |
gap-8 | Elemanlar arasında daha da geniş boşluk bırakır. | html<br><div class="grid gap-8 grid-cols-2"> <div>1</div> <div>2</div> </div> |
gap-10 | Elemanlar arasında oldukça geniş boşluk bırakır. | html<br><div class="grid gap-10 grid-cols-2"> <div>1</div> <div>2</div> </div> |
gap-12 | Elemanlar arasında geniş boşluk bırakır. | html<br><div class="grid gap-12 grid-cols-2"> <div>1</div> <div>2</div> </div> |
gap-16 | Elemanlar arasında çok geniş bir boşluk bırakır. | html<br><div class="grid gap-16 grid-cols-2"> <div>1</div> <div>2</div> </div> |
grid-cols-2 sınıfı iki sütun oluşturur.gap-0 en küçük boşluk, gap-16 en büyük boşluğu ifade eder.Tabloyu referans alarak hem tasarım hem de düzenleme ihtiyaçlarınızı kolayca karşılayabilirsiniz!
İşte Bootstrap gölge (shadow) sınıfları için bir tablo:
| Gölge Sınıfı | Açıklama | Kod Örneği |
|---|---|---|
shadow | Varsayılan hafif bir gölge uygular. | html<br><div class="shadow p-3 mb-3 bg-body rounded">Varsayılan Gölge</div> |
shadow-sm | Daha küçük, hafif bir gölge uygular. | html<br><div class="shadow-sm p-3 mb-3 bg-body rounded">Küçük Gölge</div> |
shadow-md | Orta yoğunlukta bir gölge uygular (Özelleştirilmiş, bazı Bootstrap uyarlamalarında bulunabilir). | html<br><div class="shadow-md p-3 mb-3 bg-body rounded">Orta Gölge</div> |
shadow-lg | Daha belirgin bir büyük gölge uygular. | html<br><div class="shadow-lg p-3 mb-3 bg-body rounded">Büyük Gölge</div> |
shadow-xl | Ekstra büyük gölge uygular (Özelleştirilmiş, bazı Bootstrap uyarlamalarında bulunabilir). | html<br><div class="shadow-xl p-3 mb-3 bg-body rounded">Ekstra Büyük Gölge</div> |
shadow-2xl | Çok yoğun bir gölge uygular (Özelleştirilmiş, genelde Tailwind gibi çerçevelerde kullanılır). | html<br><div class="shadow-2xl p-3 mb-3 bg-body rounded">Yoğun Gölge</div> |
shadow-inner | İç gölge uygular. Elemanın içine gölge ekler. | html<br><div class="shadow-inner p-3 mb-3 bg-body rounded">İç Gölge</div> |
shadow-none | Hiç gölge uygulamaz. | html<br><div class="shadow-none p-3 mb-3 bg-body rounded">Gölge Yok</div> |
shadow-md, shadow-xl, shadow-2xl gibi sınıflar Bootstrap'in özelleştirilmiş sürümlerinde yer alabilir. Bu sınıflar genellikle Tailwind CSS gibi farklı çerçevelerde kullanılır.shadow, shadow-sm, shadow-lg, shadow-inner, shadow-none sınıfları bulunur.p-3 mb-3 bg-body rounded gibi ek sınıflar, öğeyi daha estetik hale getirmek için eklenmiştir.Bu kod örneklerini test ederek farklı gölge efektlerini inceleyebilirsiniz!
İşte Bootstrap Flexbox align-items sınıfları için bir özet tablo:
| Pozisyon Sınıfı | Açıklama | Kod Örneği |
|---|---|---|
align-items-start | Ebeveynin başına hizalar (üst kenar için geçerli). | html<br><div class="d-flex align-items-start" style="height: 200px; background-color: lightblue;"> <div>Başlangıç</div> </div> |
align-items-center | Ebeveynin ortasına hizalar. | html<br><div class="d-flex align-items-center" style="height: 200px; background-color: lightgreen;"> <div>Orta</div> </div> |
align-items-end | Ebeveynin sonuna hizalar (alt kenar için geçerli). | html<br><div class="d-flex align-items-end" style="height: 200px; background-color: lightcoral;"> <div>Son</div> </div> |
align-items-baseline | Elemanları ebeveynin temel çizgisine (yazı hattına) hizalar. | html<br><div class="d-flex align-items-baseline" style="height: 200px; background-color: lightyellow;"> <div style="font-size: 18px;">Evrensel Başlangıç</div> <div style="font-size: 12px;">Küçük Yazı</div> </div> |
align-items-stretch | Elemanları, ebeveynin yüksekliğine veya boyutuna göre germek için hizalar. | html<br><div class="d-flex align-items-stretch" style="height: 200px; background-color: lightgray;"> <div style="background-color: lightblue;">Gerilmiş Eleman</div> </div> |
Bu sınıflar, Flexbox düzeni içinde öğelerin dikey hizalanmasını kontrol eder. Flex container'da (d-flex) kullanılarak öğelerin konumunu kolayca değiştirebiliriz.
İşte Bootstrap opaklık (opacity) sınıfları için bir özet tablo:
| Opaklık Sınıfı | Açıklama | Kod Örneği |
|---|---|---|
opacity-0 | Eleman tamamen saydamdır, görünmez. | html<br><div class="opacity-0">Bu içerik görünmez</div> |
opacity-25 | Eleman %25 opaklığa sahiptir, %75 saydamdır. | html<br><div class="opacity-25">Bu içerik %25 opaklıkla görünür</div> |
opacity-50 | Eleman %50 opaklığa sahiptir, yarı saydamdır. | html<br><div class="opacity-50">Bu içerik %50 opaklıkla görünür</div> |
opacity-75 | Eleman %75 opaklığa sahiptir, %25 saydamdır. | html<br><div class="opacity-75">Bu içerik %75 opaklıkla görünür</div> |
opacity-100 | Eleman tamamen opaktır, hiç saydamlık yoktur (tam görünür). | html<br><div class="opacity-100">Bu içerik %100 opaklıkla görünür</div> |
Bu tablo, her opaklık sınıfının elemanın görünürlüğünü nasıl değiştirdiğini açıklayan bir açıklama ve basit bir HTML kod örneği içeriyor. Kodları çalıştırarak opaklık düzeylerini gözlemleyebilirsiniz!
İşte Bootstrap overflow sınıfları için bir özet tablo:
| Overflow Sınıfı | Açıklama | Kod Örneği |
|---|---|---|
overflow-auto | İçerik, konteyner boyutunu aştığında, otomatik olarak kaydırma çubuğu ekler. | html<br><div class="overflow-auto" style="width: 200px; height: 100px;">Uzun içerik burada...</div> |
overflow-hidden | İçerik konteyneri aştığında, taşan içerik gizlenir. Kaydırma çubuğu görünmez. | html<br><div class="overflow-hidden" style="width: 200px; height: 100px;">Uzun içerik burada...</div> |
overflow-visible | Taşan içerik görünür, kaydırma çubuğu eklenmez. | html<br><div class="overflow-visible" style="width: 200px; height: 100px;">Uzun içerik burada...</div> |
overflow-scroll | İçerik konteyneri aştığında, her zaman kaydırma çubuğu görünür. | html<br><div class="overflow-scroll" style="width: 200px; height: 100px;">Uzun içerik burada...</div> |
overflow-x-auto | Yalnızca yatayda, içerik konteyneri aştığında otomatik kaydırma çubuğu ekler. | html<br><div class="overflow-x-auto" style="width: 200px; height: 100px;">Uzun içerik burada...</div> |
overflow-x-hidden | Yalnızca yatayda, taşan içerik gizlenir, kaydırma çubuğu görünmez. | html<br><div class="overflow-x-hidden" style="width: 200px; height: 100px;">Uzun içerik burada...</div> |
overflow-x-visible | Yalnızca yatayda, taşan içerik görünür, kaydırma çubuğu eklenmez. | html<br><div class="overflow-x-visible" style="width: 200px; height: 100px;">Uzun içerik burada...</div> |
overflow-y-auto | Yalnızca dikeyde, içerik konteyneri aştığında otomatik kaydırma çubuğu ekler. | html<br><div class="overflow-y-auto" style="width: 200px; height: 100px;">Uzun içerik burada...</div> |
overflow-y-hidden | Yalnızca dikeyde, taşan içerik gizlenir, kaydırma çubuğu görünmez. | html<br><div class="overflow-y-hidden" style="width: 200px; height: 100px;">Uzun içerik burada...</div> |
overflow-y-visible | Yalnızca dikeyde, taşan içerik görünür, kaydırma çubuğu eklenmez. | html<br><div class="overflow-y-visible" style="width: 200px; height: 100px;">Uzun içerik burada...</div> |
overflow-auto: İçerik taşarsa kaydırma çubuğu ekler.overflow-hidden: Taşan içerik gizlenir.overflow-visible: Taşan içerik görünür, kaydırma çubuğu yoktur.overflow-scroll: Her zaman kaydırma çubuğu gösterilir.overflow-x-*: Yalnızca yatay eksende geçerli.overflow-y-*: Yalnızca dikey eksende geçerli.Bu tablo, overflow sınıflarının nasıl çalıştığını ve her birinin özel kullanım durumlarını gösteriyor.
İşte Bootstrap z-index sınıfları için bir özet tablo:
| Sınıf | Açıklama | Kod Örneği |
|---|---|---|
z-index-1 | Elemanın katman sırasını 1 olarak ayarlar. Diğer öğelere göre daha düşük bir katman seviyesine sahiptir. | html<br><div class="position-relative z-index-1">Katman 1</div> |
z-index-10 | Elemanın katman sırasını 10 olarak ayarlar. z-index-1'den daha yüksek ancak diğer öğelere göre daha düşük. | html<br><div class="position-relative z-index-10">Katman 10</div> |
z-index-20 | Elemanın katman sırasını 20 olarak ayarlar. z-index-10'dan daha yüksek bir katman seviyesinde olur. | html<br><div class="position-relative z-index-20">Katman 20</div> |
z-index-50 | Elemanın katman sırasını 50 olarak ayarlar. Diğerlerinden belirgin şekilde üstte yer alır. | html<br><div class="position-relative z-index-50">Katman 50</div> |
z-index-100 | Elemanın katman sırasını 100 olarak ayarlar. Diğer öğelere göre çok daha yüksek bir katman seviyesine sahip olur. | html<br><div class="position-relative z-index-100">Katman 100</div> |
z-index-500 | Elemanın katman sırasını 500 olarak ayarlar. z-index-100'den çok daha yüksek, üst katmanlarda yer alır. | html<br><div class="position-relative z-index-500">Katman 500</div> |
z-index-1000 | Elemanın katman sırasını 1000 olarak ayarlar. En üst katman seviyesinde yer alır. | html<br><div class="position-relative z-index-1000">Katman 1000</div> |
z-index bir öğenin katman sırasını belirler. Yüksek z-index değeri, öğeyi daha üstte ve daha ön planda yapar.position değeri relative, absolute, fixed veya sticky olmalıdır ki z-index etkili olsun.z-index değerini artırabilirsiniz.İşte Bootstrap renk sınıfları için bir özet tablo:
| Renk Sınıfı | Açıklama | Kod Örneği |
|---|---|---|
text-primary | Ana tema rengiyle yazı rengi. Genellikle mavi tonlarında. | html<br><p class="text-primary">Bu metin birincil renk ile yazılmıştır.</p> |
text-secondary | İkinci derecede önemli metin rengi, genellikle gri tonlarında. | html<br><p class="text-secondary">Bu metin ikincil renk ile yazılmıştır.</p> |
text-success | Başarı veya olumlu durumları göstermek için yeşil renk. | html<br><p class="text-success">Bu metin başarılı bir durumu belirtir.</p> |
text-danger | Hata veya olumsuz durumu göstermek için kırmızı renk. | html<br><p class="text-danger">Bu metin tehlikeli bir durumu belirtir.</p> |
text-warning | Uyarılar için sarı renk. Genellikle dikkat çekmek için kullanılır. | html<br><p class="text-warning">Bu metin bir uyarıyı belirtir.</p> |
text-info | Bilgilendirme amaçlı mavi-yeşil tonlarıyla metin rengi. | html<br><p class="text-info">Bu metin bir bilgi mesajını belirtir.</p> |
text-light | Açık renkli yazı rengi, genellikle koyu arka planlarla birlikte kullanılır. | html<br><p class="text-light">Bu metin açık renk ile yazılmıştır.</p> |
text-dark | Koyu renkli yazı rengi, genellikle açık arka planlarla kullanılır. | html<br><p class="text-dark">Bu metin koyu renk ile yazılmıştır.</p> |
text-muted | Gri renkte, soluk bir metin rengi. Genellikle alt metinler veya açıklamalar için kullanılır. | html<br><p class="text-muted">Bu metin soluk, muted renk ile yazılmıştır.</p> |
text-white | Beyaz renkli yazı rengi. Genellikle koyu arka planlar için kullanılır. | html<br><p class="text-white">Bu metin beyaz renk ile yazılmıştır.</p> |
Bu renk sınıfları, metinler için farklı renk tonlarını hızlıca uygulamanızı sağlar. Farklı renkleri arka plan veya tema renklerinizle uyumlu hale getirerek kullanabilirsiniz!
İşte Bootstrap`in font-weight sınıfları için bir özet tablo:
| Font Weight Sınıfı | Açıklama | Kod Örneği |
|---|---|---|
fw-normal | Varsayılan font ağırlığı, genellikle 400 değerine karşılık gelir. | html<br><p class="fw-normal">Normal Yazı</p> |
fw-bold | Kalın yazı. Genellikle 700 font ağırlığına karşılık gelir. | html<br><p class="fw-bold">Kalın Yazı</p> |
fw-bolder | Bir üst seviyede daha kalın yazı. Ebeveynin font ağırlığına göre daha kalın olur. | html<br><p class="fw-bolder">Daha Kalın Yazı</p> |
fw-lighter | Bir alt seviyede daha ince yazı. Ebeveynin font ağırlığına göre daha ince olur. | html<br><p class="fw-lighter">Daha İnce Yazı</p> |
Bu tablo, font-weight sınıflarının ne işe yaradığını ve her birinin nasıl kullanılacağını örneklerle açıklamaktadır. Bu sınıflar, metinlerin kalınlık düzeyini kolayca kontrol etmenizi sağlar.