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> 

enter image description here

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>     

Comments

Popular posts from this blog

ios - Realm over CoreData should I use NSFetchedResultController or a Dictionary? -

authentication - Mongodb revoke acccess to connect test database -

r - Update two sets of radiobuttons reactively - shiny -