Wie man Text unter Bild mit Bootstrap hinzufügt?

Question

Ich habe eine Vorlage, die ich versuche zu konfigurieren, ich weiß nicht viel über Bootstrap, aber ich bekomme es langsam, während ich recherchiere. Ich versuche, Text unter jedes Bild zu legen, ohne die Bilder auf der Unterseite zu versetzen. (Zum ersten Mal Entsendung so Ausreden mein Noob)

<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

Versuchen Sie, diese div in Ihrer Spalte div hinzu:

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

wie dies gerade für alle Bilder, die durch die div mit dem class="caption;" Entfernen Da Sie dort auch einen Fehler haben, können Sie nicht zweimal class innerhalb auf HTML-Element enthalten. Der richtige Weg ist, eine Klasse zu schreiben und sie mit dem Raum zwischen genau wie diese Klasse zu trennen = „class1 class2“:

<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> 

Sie können mit dem Polster oder dem Header-Tag spielen, um es so groß wie Sie wollen und platziere es wo du willst.