Cara Mudah Membuat Thumbnail dengan Caption Menggunakan Bootstrap

Thumbnail dengan menggunakan sedikit tuisan yang menjeleskan dari gambar itu sendiri, hal ini sama dengan membuat thumbnail tanpa menggunakan caption. Caption memberi manfaat sendiri ketika user melihat dan membaca sedikit penjelasan, setidaknya user tersebut dapat mengetahui sedikit dari gambaran tersebut.

Berikut contoh kodenya..

<div class="container">
 <div class="row">
  <h1 style="margin-bottom:30px;">Thumbnail With Caption</h1>
  <div class="col-sm-4">
   <div class="thumbnail">
             <a href="">
                 <img src="img/Capture.JPG">
                </a>
                <div class="caption">
                <a href=""><h1>Title Here</h1></a>
                 <p>Lorem ipsum dolor set amet...Lorem ipsum dolor set 

amet...Lorem ipsum dolor set amet...Lorem ipsum dolor set amet...</p>
                    <a class="btn btn-danger">View detail</a>
                </div>
            </div>
  </div>
        
        <div class="col-sm-4">
   <div class="thumbnail">
             <a href="">
                 <img src="img/Capture.JPG">
                </a>
                <div class="caption">
                <a href=""><h1>Title Here</h1></a>
                 <p>Lorem ipsum dolor set amet...Lorem ipsum dolor set 

amet...Lorem ipsum dolor set amet...Lorem ipsum dolor set amet...</p>
                    <a class="btn btn-danger">View detail</a>
                </div>
            </div>
  </div>
        
        <div class="col-sm-4">
   <div class="thumbnail">
             <a href="">
                 <img src="img/Capture.JPG">
                </a>
                <div class="caption">
                <a href=""><h1>Title Here</h1></a>
                 <p>Lorem ipsum dolor set amet...Lorem ipsum dolor set 

amet...Lorem ipsum dolor set amet...Lorem ipsum dolor set amet...</p>
                    <a class="btn btn-danger">View detail</a>
                </div>
            </div>
  </div>

  
 </div>
</div>

Kode diatas dapat ditambahkan sendiri sesuai dengan keinginan masing-masing coder. Hasil kode diatas akan terlihat seperti dibawah ini...

Disini anda bisa mengembangkan dari hasil basic yang ditawarkan oleh bootstrap, nada dapat meng-custome sendiri sesuai kebutuhan masing-masing.