Bootstrap 4 Genişlik ve Yükseklik

HTML ve CSS düzeninde her bir elemanın türüne göre varsayılan genişlik ve yüksekliği bulunur. Bootstrap4'te genişlik ve yükseklik özelliklerinin %25,%50 gibi oranlarda küçültmek mümkündür.

Bir nesnenin genişliğini değiştirmek için w(width kısaltması), yüksekliğini değiştirmek için h (height kısaltması) kullanılır.
Örneğin bir nesnesin varsayılan genişliğini %25 oranında küçültmek için w-25 class özelliği verilmelidir.
Aynı şekilde nesnenin varsayılan yüksekliğini %50 oranında değiştirmek için h-50 class özelliği nesneye eklenmelidir.

Kulllanılabilecek oranlar 25,50,75,100 ve auto'dur.
Kullanım şekli ise önce genişlik yükseklik türü, - işareti ve sonrasında oran türü gelmelidir.

<div class="h-50">%50 Yükseklik</div> <div class="w-75">%75 Genişlik</div>


Yorumlar


İyi günler, cevap ile ilgili kafamda birkaç çözüm önerisi var ancak site yapınızı da bilmem gerekiyor. Burdan yazışmak zaman alır, çünkü tüm yorumların aynı zamanda onaylanması gerekiyor. Mümkünse yarın gün için info@frontendokulu.com mail adresine mail atar mısınız? Ordan iletişim kuralım

iyi günler ben bootstrap ile bir site yapmak istiyorum fakat üst menümün altındaki bölüm olan ve soldaki bir menüm var onun yanında da content bölümüm var... sol menüm yükseklik olarak büyüdükçe sağdaki içerik böllümüm de büyüyor ben sabit kalmasını istiyorum... yada tam tersi içerik bölümüme bir resim yada yazı ekliyorum... doğal olarak sayfam aşağıya doğru doluyor böyle olunca da menüm de aşağı doğru genişliyor... sonrasında ben başka bir içerik eklediğim de menünün altında boş bir alan oluşmuş oluyor bunu nasıl engellerim ... şöyle düşünün benim sol menümdeki kategorilerden ilki aşağıya doğru 200 px ... ondan sonra diğer kategorim başlayacak... fakat ben sağa bir resim yüklediğim de mesela yüksekliği 400 olan bir slayt o zaman sol bülüm de 200 px lik bir boşluk oluşuyor ve sola bir kategori daha eklediğim de ilk kategori ile arasında 200 pxlik bir boşluk oluyor bunu nasıl düzenlerim acaba

Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın

Hakkımızda

Bu site, website tasarımı yapılırken frontend(ön yüz) teknolojileri hakkında kısa anlatım ve örnekler paylaşmak amacıyla hazırlanmıştır.

Web tasarımda şu an için en sık kullanılan dil ve frameworkler HTML, CSS, JQUERY ve BOOTSTRAP olması sebebiyle bu alanların üzerinde örnekler ve çalışmalar olacaktır.

İletişim

  • info@frontendokulu.com