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

php - Wordpress website dashboard page or post editor content is not showing but front end data is showing properly -

How to get the ip address of VM and use it to configure SSH connection dynamically in Ansible -

javascript - Get parameter of GET request -