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

Question

Hi,

Here is what i'm trying to do :

Center the content: (img + caption) of each Thumbnail. My img must be span3 and the caption must be span4.

Here is my problem :

I can get the content center, or the caption float next to the img; But i can't get both at the same time.

I started to use bootstrap this morning, so i guess i'm using some class the wrong way.

Here is my 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>

Answer 1

Slake, from my little experience with bootstrap, you have to create a containing div to setup the overall layout. Take a look at the bootstrap documention - layout section here. e.g.,

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

Also, take a look at this very helpful w3resource tutorial to create thumbnails with twitter bootstrap. Following this tutorial I was quickly able to create a basic example of the thumbnail grid you're trying to setup. You can fiddle with the code here.

Copying a part of the example code (more in the 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>    

Answer 2

also u can use offset class to have space for your content, like this code:

<div class="container">
    <div class="row">
        <div class="snap4"><img class="pull-left" src="http://dummyimage.com/260x180/ddd/000" /></div>
        <div class="span7 pull-left">
            <h2>Heading</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div class="offset1"></div>
    </div>
    <br>
    <div class="row">
        <div class="snap4"><img class="pull-left" src="http://dummyimage.com/260x180/ddd/000" /></div>
        <div class="span7 pull-left">
            <h2>Heading</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div class="offset1"></div>
    </div>
    <br>
    <div class="row">
        <div class="snap4"><img class="pull-left" src="http://dummyimage.com/260x180/ddd/000" /></div>
        <div class="span7 pull-left">
            <h2>Heading</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
        <div class="offset1"></div>
    </div>
</div>

Answer 3

Dear Friend:
mey it can help u :)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstap</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css">
<style>
body {padding:20px;}
img {margin:0 3px;}
</style>
</head>

<body>
<div class="container">
    <div class="row">
        <div class="snap4"><img class="pull-left" src="http://dummyimage.com/260x180/ddd/000" /></div>
        <div class="span8 pull-left">
            <h2>Heading</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="snap4"><img class="pull-left" src="http://dummyimage.com/260x180/ddd/000" /></div>
        <div class="span8 pull-left">
            <h2>Heading</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
    </div>
    <br>
    <div class="row">
        <div class="snap4"><img class="pull-left" src="http://dummyimage.com/260x180/ddd/000" /></div>
        <div class="span8 pull-left">
            <h2>Heading</h2>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </div>
    </div>
</div>

</body>
</html>