html - Bootstrap thumbnail - Center contents (img + caption) with caption float:left -

hi,

here i'm trying :

center content: (img + caption) of each thumbnail. my img must span3 , caption must span4.

here problem :

i can content center, or caption float next img; but can't both @ same time.

i started use bootstrap morning, guess i'm using class wrong way.

here code :

<ul class="thumbnails">     <li class="span12">         <div class="thumbnail span12">             <img class="span3" data-src="holder.js/300x200" alt="300x200">             <div class="caption span4">                 <h3>my title</h3>                 <p>blabla</p>             </div>         </div>     </li>  </ul> 

slake, little experience bootstrap, have create containing div setup overall layout. take @ bootstrap documention - layout section here. e.g.,

<!-- wrap twitter stuff in --> <div class="container"></div> 

also, take @ helpful w3resource tutorial create thumbnails twitter bootstrap. following tutorial able create basic example of thumbnail grid you're trying setup. can fiddle code here.

copying part of example code (more in link above):

<div class="container">     <ul class="thumbnails">         <li class="span12">            <div class="thumbnail">                <div class="span3 offset2"><img src="http://lorempixel.com/300/200/sports/5" alt="300x200"></div>             <div class="span5">                 <h3>my title</h3>                 <p>blabla</p>             </div>             </div>         </li>     </ul> </div>