Twitter Bootstrap thumbnail caption to the right

Question

How to make the caption of a Twitter Bootstrap thumbnail be placed to the right of the image instead of below? Preferably in CSS. So far I am just using existing tags as my css knowledge is very limited.

<ul class="thumbnails">
  <li class="span2">
    <div class="thumbnail span4">
  <div class="span2">
        <img src="http://placehold.it/120x160" alt="">
      </div>
      <div class="caption">
        <h5>Thumbnail label </h5>
        <p>Cras justo odio, dapibus ac facilisis in, egestas eget. Eget metus</p>
        <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
      </div>
    </div>
  </li>
</ul>

score 21 · Accepted Answer · answered Aug 03 '12 at 16:27

21

With a slight modification of your HTML, and the addition of a new class (right-caption), a few CSS rules should cover you.

HTML

<div class="thumbnail right-caption span4">
  <img src="http://placehold.it/120x160" alt="">
  <div class="caption">
    <h5>Thumbnail label</h5>
    <p>Cras justo odio, dapibus ac facilisis in, egestas eget. Eget metus</p>
    <p><a href="#" class="btn btn-primary">Action</a> <a href="#" class="btn">Action</a></p>
  </div>
</div>

Note: I'm taking the <img> out of the <div> you originally wrapped it in.

CSS

.thumbnail.right-caption > img {
    float: left;
    margin-right: 9px;
}

.thumbnail.right-caption {
    float: left;
}

.thumbnail.right-caption > .caption {
    padding: 4px;
}

Note: The margin and padding are just stylistic; floating is the key.

JSFiddle

answered Aug 03 '12 at 16:27

merv

67,214
13
180
245

@merv nice one but when i try to increase the content of the caption, when the caption is more than the height of the image, caption comes to new line as in this fiddle http://jsfiddle.net/shmdhussain/y4XRR/191/ – Mohamed Hussain Apr 26 '13 at 16:58
1

@MohamedHussain Um...that's going to look bad either way. If you still want it right aligned, you could add `bottom-margin` to the `` to make sure it always surpasses the height of the `div.caption`. Or you could add `float:right` to the `.caption`, as long as the width of the content in that div doesn't exceed the remainder in the block. Personally, it's cases like this that I would push back against the content editors and argue that captions longer than a certain number of characters violate the meaning of **caption**. ;) – merv Apr 26 '13 at 18:46

score 4 · Answer 2 · answered Sep 17 '15 at 10:29

4

No additional css. Change a/span tags to div if needed

<a href="..." class="thumbnail clearfix">
  <img src="..." class="pull-left">
    <span class="caption pull-right">
    Lorem ipsum
   </span>
  </a>

answered Sep 17 '15 at 10:29

ymakux

3,415
1
34
43

Twitter Bootstrap thumbnail caption to the right

2 Answers2

HTML

CSS

JSFiddle

Linked