v2.5.2
Giriş yap

SVG Yerine İmg Kullanmak?

coder
280 defa görüntülendi

Merhaba arkadaşlar.
Bootstrap'in aşağıdaki blog örneğindeki Thumbnail yazan yerde resim olsun istiyorum.
Ancak ne kadar uğraştıysam resim koyamadım. İstediğim gibi olmuyor. Thumbnail yazan kısımda svg kullanılmış.
Ben kullanmayı bilmiyorum.

Dediğim işlemi nasıl yapabiliriz?

<div class="col-md-6">
  <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
	<div class="col p-4 d-flex flex-column position-static">
	  <strong class="d-inline-block mb-2 text-primary-emphasis">World</strong>
	  <h3 class="mb-0">Featured post</h3>
	  <div class="mb-1 text-body-secondary">Nov 12</div>
	  <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
	  <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
		Continue reading
		<svg class="bi"><use xlink:href="#chevron-right"></use></svg>
	  </a>
	</div>
	<div class="col-auto d-none d-lg-block">
	  <svg class="bd-placeholder-img" width="200" height="250" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Thumbnail" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#55595c"></rect><text x="50%" y="50%" fill="#eceeef" dy=".3em">Thumbnail</text></svg>
	</div>
  </div>
</div>

Bootstrap Blog Örneği

Codepen

emmir2
93 gün önce

böyle dener misin


<div class="container py-5">
  
  <div class="col-md-6">
  <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
	<div class="col-md-8 p-4 d-flex flex-column position-static">
	  <strong class="d-inline-block mb-2 text-primary-emphasis">World</strong>
	  <h3 class="mb-0">Featured post</h3>
	  <div class="mb-1 text-body-secondary">Nov 12</div>
	  <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
	  <a href="#" class="icon-link gap-1 icon-link-hover stretched-link">
		Continue reading
		<svg class="bi"><use xlink:href="#chevron-right"></use></svg>
	  </a>
	</div>
	<div class="col-md-4">
	  	  <img class="bd-placeholder-img" src=".....">
	</div>
  </div>
</div>
</div>