Önyükleme ile görüntü altında metin nasıl eklenir?

Question

Yapılandırmaya çalıştığım bir şablonum var, bootstrap hakkında pek bir şey bilmiyorum ama araştırırken yavaş yavaş alıyorum. Alttaki görüntüleri dengelemeden her resmin altına metin koymaya çalışıyorum. (Ilk kez gönderme bahaneler yani benim çaylak)

<div class="container" id="projects-animate"> 
    <div class="row row-padded"> 
     <div class="col-md-3"> 
      <h2 class="fh5co-section-heading to-animate">Projects<span class="fh5co-border"></span></h2> 
       <p class="to-animate">Libero velit fugit blanditiis tempora repellat iste inventore amet quaerat ex aliquid sint labore placeat esse.</p> 
     </div> 
     <div class="col-md-8 col-md-push-1"> 
      <div class="row"> 
       <div class="col-md-5 col-sm-5 col-xs-6 col-xxs-12 fh5co-project to-animate"> 
        <a href="images/work_1.jpg" class="image-popup"> 
         <div class="fh5co-overlay-text">Project no. 1</div> 
         <div class="fh5co-overlay"></div> 
         <img src="images/work_1.jpg" alt="Free HTML5 Template" class="img-responsive"> 
        </a> 
        <div class="caption" class="col-md-3"><p>HELLLO</p></div> 
       </div> 
       <div class="col-md-5 col-sm-5 col-xs-6 col-xxs-12 fh5co-project to-animate"> 
        <a href="images/work_2.jpg" class="image-popup"> 
         <div class="fh5co-overlay-text">Project no. 2</div> 
         <div class="fh5co-overlay"></div> 
         <img src="images/work_2.jpg" alt="Free HTML5 Template" class="img-responsive"> 
        </a> 
       </div> 
       <div class="col-md-5 col-sm-5 col-xs-6 col-xxs-12 fh5co-project to-animate"> 
        <a href="images/work_3.jpg" class="image-popup"> 
         <div class="fh5co-overlay-text">Project no. 3</div> 
         <div class="fh5co-overlay"></div> 
         <img src="images/work_3.jpg" alt="Free HTML5 Template" class="img-responsive"> 
        </a> 
       </div> 
       <div class="col-md-5 col-sm-5 col-xs-6 col-xxs-12 fh5co-project to-animate"> 
        <a href="images/work_4.jpg" class="image-popup"> 
         <div class="fh5co-overlay-text">Project no. 4</div> 
         <div class="fh5co-overlay"></div> 
         <img src="images/work_4.jpg" alt="Free HTML5 Template" class="img-responsive"> 
        </a> 
       </div> 
       <div class="col-md-5 col-sm-5 col-xs-6 col-xxs-12 fh5co-project to-animate"> 
        <a href="images/work_5.jpg" class="image-popup"> 
         <div class="fh5co-overlay-text">Project no. 5</div> 
         <div class="fh5co-overlay"></div> 
         <img src="images/work_5.jpg" alt="Free HTML5 Template" class="img-responsive"> 
        </a> 
       </div> 
       <div class="col-md-5 col-sm-5 col-xs-6 col-xxs-12 fh5co-project to-animate"> 
        <a href="images/work_6.jpg" class="image-popup"> 
         <div class="fh5co-overlay-text">Project no. 6</div> 
         <div class="fh5co-overlay"></div> 
         <img src="images/work_6.jpg" alt="Free HTML5 Template" class="img-responsive"> 
        </a> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

Answer 1

sütun div içinde bu div ekleyerek Dene: Sadece tüm görüntüler için böyle

<div class="carousel-caption"> 
    <h3>Example headline.</h3> 
</div> 

class="caption;" ile div kaldırarak Orada da bir hata var çünkü html öğesinde iki kez class içeremezsiniz. Doğru yol bir sınıf yazmak ve sadece bu sınıfı gibi = "sınıfı1 Class2" arasındaki boşlukta ile ayırarak şudur:

<div class="col-md-5 col-sm-5 col-xs-6 col-xxs-12 fh5co-project to-animate"> 
        <a href="images/work_1.jpg" class="image-popup"> 
         <div class="fh5co-overlay-text">Project no. 1</div> 
         <div class="fh5co-overlay"></div> 
         <img src="images/work_1.jpg" alt="Free HTML5 Template" class="img-responsive"> 
        </a> 
<div class="carousel-caption"> 
    <h3>Example headline.</h3> 
</div> 
       </div> 

İstediğiniz olduğunca büyük yapmak için dolgu ya da başlık etiketi ile oynayabilir ve istediğiniz yere yerleştirin.