Profil detayı eklendi, herkes profillerine girip bir gözatsın! Sevdiğiniz üyelerin cevaplarını takip edin! Tüm güncellemeler

Bootstrap vertical align sorunu

Merhaba arkadaşlar, bootstrap kütüphanesinde align-bottom, align-middle gibi kodları kullanamıyorum sebebi nedir acaba


Örnek

<div class="container-fluid home-2">
	<div class="row">
		<div class="col-12 col-lg-6 p-3 p-lg-4 bg-1">
			<span class="align-center">HAKKIMIZDA</span>
		</div>
		<div class="col-12 col-lg-6 p-0">
			<div class="container-fluid">
				<div class="row">
					<div class="col-12 p-3 p-lg-4 bg-2">2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2</div>
					<div class="col-6 p-3 p-lg-4 bg-3">3 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2</div>
					<div class="col-6 p-3 p-lg-4 bg-4">4 2 2 2 2 2 2 2 2</div>
				</div>
			</div>
		</div>
	</div>
</div>


Mesela burada col ların min yüksekliği %50 gibi 22 yazıları bu yüzden ama hakkımızda yazısı dğier col da tepede duruyor align-bottom kodunu kullanmama rağmen tepede muhtemelen ben kodu yanlış kullanıyorum tam anlayamadım nasıl düzeltebilirim acaba?

2

Cevaplar (2)

İşlem devam ediyor, lütfen bekleyin..
Serdar Güler
Doğru Cevap
@gulers
3 ay önce

Sanırım 2 lerin olduğu bölümler sağda. Solda da hakkımzıda başlığı olsun istiyorsun. Bu hakkımızda başlığı da 2 lerin olduğu sağdaki alanı ortalayacak şekilde olsun. Eğer öyle birşey istiyorsan aşağıdaki şekilde kodu düzenledim.


<div class="container-fluid home-2">
    <div class="row">
        <div class="d-flex col-12 col-lg-6 p-3 p-lg-4 bg-1">
      <span class="align-self-center">HAKKIMIZDA</span>
            
        </div>
        <div class="col-12 col-lg-6 p-0">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12 p-3 p-lg-4 bg-2">2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2</div>
                    <div class="col-6 p-3 p-lg-4 bg-3">3 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2</div>
                    <div class="col-6 p-3 p-lg-4 bg-4">4 2 2 2 2 2 2 2 2</div>
                </div>
            </div>
        </div>
    </div>
</div>
Cevapla @ckalyoncu2 ay önce
@gulers, hocam resim için yani img kodu için nasıl yapabilirim peki ortalama değil ama bottom olarak
Cevapla @gulers2 ay önce
@ckalyoncu, yine aynı şekilde yapabilirsin. align-self-center yerine align-self-end yazman yeterli olacak.

<div class="d-flex col-12 col-lg-6 p-3 p-lg-4 bg-1">
<span class="align-self-end"><img src="https://picsum.photos/458/354" style="height:60px"></span>
</div>
İşlem devam ediyor, lütfen bekleyin..
Ömer Çakır
@oomercakir
3 ay önce
.v-center{
display: flex;
align-items: center;//flex-end alta hizalama
}
Cevapla @gulers3 ay önce
@oomercakir, çok güzel yardımcı oluyorsun ama arkadaş bootstrap kütüphanesini zaten projesine dahil etmiş. Bir kütüphane kullanılıyorsa ve bu kütüphane içinde istediğini yapmasını sağlayan class varsa onu kullanmak gerek. Yoksa kütüphane kullanmanın bir mantığı kalmaz. Kütüphanede olan herşeyi tekrar tekrar kendisi yazarsa projede gereksiz css boyutu yükselir.
İşlem devam ediyor, lütfen bekleyin..

Cevap yaz Sadece sorunun cevabını yazın