Bootstrap Kenarlık, Köşe Yuvarlatma ve Gölge Sınıfları

Kenarlık eklemek ve kaldırmak

Belge kenarlık sınıflarını iki gruba ayırır: ekleyen ve çıkaran. Ekleyen grupta .border dört kenara birden, diğer dört sınıf tek bir kenara kenarlık verir. Hepsinin değeri aynıdır: $border-width kalınlığında (1px), düz çizgili ve $border-color renginde ($gray-300, yani #dee2e6). Çıkaran grupta .border-0 dört kenarı, .border-top-0, .border-end-0, .border-bottom-0 ve .border-start-0 ise tek kenarı sıfırlar. Bootstrap 5.0.2 derlenmiş CSS dosyasında bu sınıflar şöyle tanımlıdır:

.border {
  border: 1px solid #dee2e6 !important;
}

.border-0 {
  border: 0 !important;
}

.border-top {
  border-top: 1px solid #dee2e6 !important;
}

.border-top-0 {
  border-top: 0 !important;
}

/* (kısaltıldı) */

.border-primary {
  border-color: #0d6efd !important;
}

/* (kısaltıldı) */

.border-1 {
  border-width: 1px !important;
}

Tüm kurallar !important taşıdığı için iki sınıf aynı özelliğe dokunduğunda kazananı özgüllük değil, dosyadaki sıra belirler. Sıra şöyledir: .border, .border-0, ardından her kenar için önce ekleyen sonra çıkaran sınıf, sonra renkler ve en sonda kalınlıklar. Bunun pratik sonuçları aşağıdaki örnekte görülüyor:

<div class="p-3 mb-3 border">Dört kenarda kenarlık (.border)</div>
<div class="p-3 mb-3 border-top border-bottom">Yalnızca üst ve alt kenar</div>
<div class="p-3 mb-3 border border-top-0">Üst kenar hariç tüm kenarlar</div>
<div class="p-3 mb-3 border-start">Yalnızca başlangıç (soldaki) kenar</div>
<div class="p-3 mb-3 border border-0">.border-0 sonra geldiği için kenarlık yok</div>

border border-top-0 birleşimi beklendiği gibi çalışır, çünkü .border-top-0 dosyada .border sınıfından sonra gelir ve yalnızca üst kenarı sıfırlar. Aynı şekilde border-0 border-top yazarsanız yalnızca üst kenar kalır. Ancak border border-0 yazdığınızda kenarlık tamamen kaybolur; sınıfların HTML'deki yazılış sırası değil CSS dosyasındaki sırası önemlidir. Çıkaran sınıflar asıl değerini, kendi kenarlığı olan ögelerde gösterir: bir kart, bir form alanı ya da bir tablo hücresi gibi bileşenlerin varsayılan kenarlığını kaldırmak için kullanılırlar.

Kenar adlarında start ve end kullanılması v5'in sağdan sola (RTL) desteğiyle ilgilidir. Soldan sağa yazılan bir sayfada .border-start derlenmiş CSS'te border-left, .border-end ise border-right üretir; RTL derlemesinde yönler yer değiştirir. v4'teki .border-left ve .border-right adları bu nedenle değiştirildi. Geçişte karşılaşacağınız diğer yeniden adlandırmalar için Bootstrap 4'ten 5'e geçiş yazısına bakın.

Bu farkı derlenmiş dosyalarda görebilirsiniz: v5.0.2 ile gelen bootstrap.rtl.css dosyasında .border-start sınıfı border-right, .text-start ise text-align: right üretir. Yani sayfanızı sağdan sola bir dile çevirdiğinizde HTML'deki sınıfları değiştirmeniz gerekmez; doğru CSS dosyasını yüklemeniz yeterlidir. RTL dosyasının nasıl yükleneceği kurulum yazısında anlatılıyor.

Kenarlık rengi ve kalınlığı

Renk sınıfları tema renklerinden üretilir ve yanlarına .border-white eklenir. Bu sınıflar yalnızca border-color değerini değiştirir; kenarlığın kendisini oluşturmazlar. Kalınlık sınıfları da benzer biçimde yalnızca border-width ayarlar ve değerleri $border-widths haritasından gelir: 1px, 2px, 3px, 4px ve 5px. Yani renk ya da kalınlık görmek için ögede mutlaka bir kenarlık sınıfı bulunmalıdır:

<span class="d-inline-block p-3 me-2 mb-2 border border-primary">primary</span>
<span class="d-inline-block p-3 me-2 mb-2 border border-3 border-danger">danger, 3px</span>
<span class="d-inline-block p-3 me-2 mb-2 border border-5 border-success">success, 5px</span>
<span class="d-inline-block p-3 me-2 mb-2 bg-dark text-white border border-2 border-white">white, 2px</span>
<span class="d-inline-block p-3 me-2 mb-2 border-bottom border-4 border-warning">alt kenar, 4px</span>

Son satır ilginç bir durumu gösteriyor: border-bottom border-4 border-warning yalnızca alt kenarda 4px sarı bir çizgi üretir. .border-4 dört kenarın kalınlığını ayarlasa da diğer kenarlarda çizgi stili tanımlı olmadığı için görünen bir şey olmaz. Bu yöntem sekme benzeri bir vurgu ya da başlık altı çizgisi için kullanışlıdır. Kenarlık rengi tablolarda da işe yarar: belge, .table-bordered tablosuna .border-primary ekleyerek hücre çizgilerini renklendirmeyi gösterir; ayrıntılar tablo yazısında. Metin ve zemin renkleri ise renk sınıfları yazısında anlatılıyor.

Bileşenlerle birlikte kullanmak

Kenarlık yardımcıları yalnızca boş kutular için değildir; asıl gücü, bileşenlerin kendi kenarlıklarını ayarlamaktır. Örneğin kart bileşeni derlenmiş CSS'te border: 1px solid rgba(0, 0, 0, 0.125) ile gelir. Bir karta .border-0 verdiğinizde bu çizgi kalkar, .border-primary verdiğinizde ise yardımcı sınıf !important taşıdığı için kartın kendi rengini ezer ve çizgi maviye döner. Resmî Pricing şablonu tam olarak bunu yapar: öne çıkarılan kart border-primary alır, aynı kartın başlık bölümü de card-header py-3 text-white bg-primary border-primary sınıflarıyla zemin, metin ve kenarlık rengini birlikte değiştirir.

Bu kalıpta dikkat edilecek nokta, kalınlık ve renk sınıflarının bileşenin var olan kenarlığına uygulanmasıdır; yeni bir çizgi eklenmez. Kart, form alanı ya da liste grubu gibi bileşenlerde ek olarak .border yazmanız gerekmez, çünkü kenarlık stili bileşenin kendi kuralından gelir. Kart bileşeninin ayrıntıları card yazısında, butonlar ise buton yazısında anlatılıyor.

Köşe yuvarlatma: .rounded ailesi

.rounded sınıfı dört köşeye $border-radius değerini, yani .25rem yarıçapı verir (kök yazı boyutu 16px iken 4px). Tek bir kenarın iki köşesini yuvarlatmak için .rounded-top, .rounded-end, .rounded-bottom ve .rounded-start vardır; örneğin .rounded-top sol üst ve sağ üst köşeye aynı değeri uygular. İki özel şekil sınıfı da bulunur: .rounded-circle yarıçapı 50% yapar, .rounded-pill ise 50rem gibi çok büyük bir değer vererek kısa kenarları tam yarım daireye çevirir.

Boyut ölçeği 0'dan 3'e kadardır. .rounded-0 yuvarlatmayı kaldırır, .rounded-1 küçük değeri ($border-radius-sm, .2rem), .rounded-2 varsayılanı (.25rem), .rounded-3 ise büyük değeri ($border-radius-lg, .3rem) kullanır. Taşıma notlarına göre v4'teki .rounded-sm ve .rounded-lg sınıfları kaldırıldı ve yerine bu sayısal ölçek geldi; kenarlık kalınlığı sınıfları (.border-1 ile .border-5) ise v5 ile eklenen yeniliklerdendir. Belge, köşe ölçeğinin utilities API ile değiştirilebileceğini de belirtir. Yuvarlatma sınıfları da !important taşıdığı için bileşenlerin köşelerini ezebilir: bir butona ya da form alanına .rounded-0 verdiğinizde bileşenin kendi yarıçapı yerine düz köşeler elde edersiniz, .rounded-pill verdiğinizde ise hap biçimli bir buton olur.

<div class="d-inline-block p-3 me-2 mb-2 bg-light border rounded">.rounded</div>
<div class="d-inline-block p-3 me-2 mb-2 bg-light border rounded-0">.rounded-0</div>
<div class="d-inline-block p-3 me-2 mb-2 bg-light border rounded-1">.rounded-1</div>
<div class="d-inline-block p-3 me-2 mb-2 bg-light border rounded-3">.rounded-3</div>
<div class="d-inline-block p-3 me-2 mb-2 bg-light border rounded-top">.rounded-top</div>
<div class="d-inline-block p-3 me-2 mb-2 bg-light border rounded-start">.rounded-start</div>
<span class="d-inline-block px-3 py-1 me-2 mb-2 bg-primary text-white rounded-pill">.rounded-pill</span>

<img src="profil.jpg" width="96" height="96"
     class="rounded-circle border border-3 border-white shadow"
     alt="Ayşe Yılmaz profil fotoğrafı">

Profil fotoğrafı satırı sık görülen bir kalıptır: kare bir görsele .rounded-circle vererek daire elde edilir, border border-3 border-white beyaz bir çerçeve çizer ve .shadow fotoğrafı zeminden ayırır. Görselin genişliği ve yüksekliği eşit olmalıdır; yüzde 50 yarıçap dikdörtgen bir görselde daire değil elips verir. Görsellerin duyarlı ölçeklenmesi ve .img-thumbnail çerçevesi görsel ve figure yazısında anlatılıyor. .rounded-pill ise kısa etiketler ve rozetler için uygundur; v5'te .badge-pill sınıfının yerini de bu yardımcı aldı, ayrıntı için badge yazısına bakın.

Gölgeler: .shadow-sm, .shadow, .shadow-lg

Gölge sınıfları box-shadow özelliğini ayarlar ve dört seçenek sunar: .shadow-none gölgeyi kaldırır, .shadow-sm ince bir gölge, .shadow normal, .shadow-lg ise geniş ve yayvan bir gölge verir. Değerler değişkenlerden gelir: küçük gölge 0 .125rem .25rem ölçüsünde yüzde 7,5 saydam siyah, normal gölge 0 .5rem 1rem ölçüsünde yüzde 15 saydam siyah, büyük gölge 0 1rem 3rem ölçüsünde yüzde 17,5 saydam siyahtır.

<div class="shadow-none p-3 mb-4 bg-light rounded">Gölge yok (.shadow-none)</div>
<div class="shadow-sm p-3 mb-4 bg-body rounded">Küçük gölge (.shadow-sm)</div>
<div class="shadow p-3 mb-4 bg-body rounded">Normal gölge (.shadow)</div>
<div class="shadow-lg p-3 mb-4 bg-body rounded">Büyük gölge (.shadow-lg)</div>

Burada iki ayarı ayırt etmek gerekir. Belgeye göre bileşenlerin üzerindeki gölgeler varsayılanda kapalıdır ve $enable-shadows Sass değişkeniyle açılır; bu değişken _variables.scss içinde false olarak tanımlıdır. Gölge yardımcı sınıfları ise bu ayardan bağımsızdır, derlenmiş CSS'te her zaman bulunur ve istediğiniz ögeye anında gölge eklemenizi sağlar. $box-shadow-inset adında bir iç gölge değişkeni de vardır, ancak buna karşılık gelen bir yardımcı sınıf üretilmez. Örneklerde .bg-body ya da .bg-light kullanılması tesadüf değildir: gölge, zemini olan bir ögede çok daha net görünür.

Resmî örnek şablonlar bu sınıfları sık kullanır. Album şablonunda kartlar card shadow-sm, Pricing şablonunda fiyat kartları card mb-4 rounded-3 shadow-sm sınıflarını taşır ve öne çıkarılan kart ayrıca border-primary alır. Blog şablonundaki yazı kutuları ise border rounded overflow-hidden shadow-sm birleşimiyle çizilir; overflow-hidden burada kutunun yanındaki küçük resmin dış kutunun yuvarlatılmış köşelerinin dışına taşmamasını sağlar, çünkü taşan içerik kırpılır.

Uygulamalı örnek: iki fiyat kutusu ve ayrılmış liste

Aşağıdaki parça Pricing şablonundaki fikri kısaltarak uygular. İki sütunlu düzen row-cols-* ile kurulur; bu kısım grid yazısının konusudur. Birinci kutu sade bir kenarlık ve ince gölge alır, ikincisi 2px birincil renkli kenarlık ve normal gölgeyle öne çıkar. Altındaki listede her öge alt kenarlıkla ayrılır, son öge ise ayırıcı taşımaz.

<div class="row row-cols-1 row-cols-md-2 g-3">
  <div class="col">
    <div class="p-4 h-100 border rounded-3 shadow-sm">
      <h3 class="fs-5">Başlangıç</h3>
      <p class="text-muted mb-0">Tek sayfalık siteler için sade seçenek.</p>
    </div>
  </div>
  <div class="col">
    <div class="p-4 h-100 border border-2 border-primary rounded-3 shadow">
      <h3 class="fs-5 text-primary">Önerilen</h3>
      <p class="text-muted mb-0">Kalın renkli kenarlık ve belirgin gölgeyle öne çıkar.</p>
    </div>
  </div>
</div>

<ul class="list-unstyled mt-4 border rounded">
  <li class="p-3 border-bottom">Alan adı yönlendirmesi</li>
  <li class="p-3 border-bottom">SSL sertifikası</li>
  <li class="p-3">Günlük yedek</li>
</ul>

Listede dış kutunun border rounded sınıfları çerçeveyi çizer, ögelerdeki border-bottom ayırıcıları üretir. Son ögeye ayırıcı vermemek, çerçevenin alt çizgisiyle ayırıcının üst üste binip kalın görünmesini önler. Aynı görünüm için Bootstrap'in hazır bileşeni de vardır; list group yazısında anlatılıyor. .h-100 sınıfı kutuların aynı satırda eşit yükseklikte kalmasına yardım eder ve boyut sınıfları yazısında ele alınıyor.

Sass değişkenleri ve karışımlar

Kenarlık, köşe ve gölge değerlerinin tamamı _variables.scss içinde !default bayrağıyla tanımlanır; bu yüzden kendi Sass dosyanızda Bootstrap'ten önce ezebilirsiniz:

// scss/_variables.scss (v5.0.2)
$border-width:                1px !default;
$border-widths: (
  1: 1px,
  2: 2px,
  3: 3px,
  4: 4px,
  5: 5px
) !default;

$border-color:                $gray-300 !default;

$border-radius:               .25rem !default;
$border-radius-sm:            .2rem !default;
$border-radius-lg:            .3rem !default;
$border-radius-pill:          50rem !default;

$box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;
$box-shadow-sm:               0 .125rem .25rem rgba($black, .075) !default;
$box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;
$box-shadow-inset:            inset 0 1px 2px rgba($black, .075) !default;

Kendi bileşenlerinizde aynı değerleri kullanmak için değişkenleri ve border-radius() karışımını çağırabilirsiniz. Aşağıdaki parça resmî belgelerdeki içe aktarma sırasına uyar; yani Bootstrap'in functions, variables ve mixins dosyaları içe aktarıldıktan sonra yazılmalıdır. border-radius() karışımı yarıçapı yalnızca $enable-rounded açıksa (varsayılanda true) üretir; böylece tüm bileşenlerde yuvarlatmayı tek bir ayarla kapatabilirsiniz.

// custom.scss: functions, variables ve mixins içe aktarıldıktan sonra
.fiyat-kutusu {
  border: $border-width solid $border-color;
  @include border-radius($border-radius-lg);
  box-shadow: $box-shadow-sm;
}

Yeni bir köşe değeri ya da gölge boyutu sınıfı eklemek için ise _utilities.scss içindeki "rounded" ve "shadow" kayıtlarını değiştirmeniz gerekir. Kayıtların yapısı ve güvenli değiştirme yolları utilities API yazısında, Sass derleme düzeni ise Sass ile özelleştirme yazısında anlatılıyor.

Sık yapılan hatalar

• Yalnızca renk sınıfı vermek: .border-danger tek başına kenarlık çizmez; yanına .border ya da tek kenar sınıfı ekleyin.
• HTML sırasına güvenmek: border-0 border ile border border-0 aynı sonucu verir, ikisinde de kenarlık yoktur; belirleyici olan CSS dosyasındaki sıradır.
• v4 adlarını kullanmak: .border-left, .rounded-left, .rounded-sm ve .rounded-lg 5.0'da yoktur; .border-start, .rounded-start, .rounded-1 ve .rounded-3 kullanın.
• $enable-shadows ile sınıfları karıştırmak: bu ayarı açmak bileşenlere gölge ekler; .shadow sınıflarının çalışması için gerekli değildir.
• Dikdörtgen görsele daire beklemek: .rounded-circle eşit en ve boy ister, aksi halde elips oluşur.
• Yuvarlatılmış kutuda taşan içerik: içteki görsel köşelerden taşıyorsa kutuya .overflow-hidden ekleyin.

Sık Sorulan Sorular

Bootstrap'te yalnızca alt kenarlık nasıl eklenir?

Ögeye .border-bottom verin. Kalınlık ve renk için aynı ögeye .border-2 ve .border-primary gibi sınıflar ekleyebilirsiniz; bunlar yalnızca var olan kenarlığın değerlerini değiştirir.

Bir görseli tam daire nasıl yaparım?

Eşit genişlik ve yükseklikteki görsele .rounded-circle sınıfı verin. Çerçeve isterseniz border border-3 border-white, zeminden ayırmak için .shadow ekleyebilirsiniz.

Kartlardaki gölgeyi tüm sitede açmanın yolu var mı?

Sass ile derliyorsanız $enable-shadows: true; ayarı, gölgeyi destekleyen bileşenlerin kendi gölgelerini açar. Derlenmiş CSS kullanıyorsanız ilgili ögelere .shadow-sm gibi sınıfları elle eklersiniz. Bu genel ayarların listesi enable seçenekleri yazısında var.

Varsayılan kenarlık rengini nasıl değiştiririm?

Kenarlık sınıflarının rengi $border-color değişkeninden ($gray-300, #dee2e6) gelir. Sass ile derliyorsanız bu değişkeni Bootstrap'in değişken dosyasından önce ezersiniz; derlenmiş CSS kullanıyorsanız ögeye bir tema renk sınıfı eklersiniz.

.rounded-2 ile .rounded arasında fark var mı?

5.0.2 derlenmiş CSS dosyasında ikisi de .25rem yarıçap üretir, çünkü utilities API kaydında hem varsayılan hem 2 anahtarı $border-radius değişkenine bağlıdır. .rounded-2, ölçek içinde açıkça "orta değer" demek istediğiniz yerlerde okunabilirlik sağlar.

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 renk sınıfları · Boyut, overflow ve float sınıfları · Görseller, figure ve ratio · Utilities API ile özel sınıf · Bootstrap card bileşeni