Twitter Bootstrap Thumbnail Caption to The Right

Twitter Bootstrap thumbnail caption to the right

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="Sample Image">
  <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

Twitter-Bootstrap: text underlining in the caption of a thumbnail

Really weird that you ask this question because I just read a thread on this not so long ago and still have my solution which I have turned into a FIDDLE for you.

If I understand your question correctly, you want the entire panel / div to be a link, which can be accomplished like this: (This is the OP's steps, cant remember them word for word)

1. Make your Div position: Relative;
2. create a link <a href="#"></a>
3. put span tags into that link <span></span>
4. Style the empty span tag with

CSS:

{ 
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;

  /* edit: added z-index */
  z-index: 1;

  /* edit: fixes overlap error in IE7/8, 
     make sure you have an empty gif */
  background-image: url('empty.gif');
}  

I think that's all there is to it. Like I said... There is a thread somewhere on this, but I cant remember what it was called.

Hope this can help.

EDIT: So after a long debate, we can forget about the above AND we came to the conclusion that this is possibly what you are after? :)

Add a tiny bit more CSS to your solution and you are sorted...

a.thumbnail:link {
text-decoration:none;
cursor:pointer;
}

Here is an updated fiddle

Twitter bootstrap media-grid: How to add a caption to the thumbnails

HTML

  <li>
    <a href="#">
        <legend >Caption</legend>
        <img class="thumbnail" src="http://placehold.it/140x90" alt="Sample Image">
    </a>
  </li>

CSS

legend { margin:3px; text-align:center;width:100%}

Working DEMO

Positioning and styling of Twitter Bootstrap Carousel Image Captions

You could customize the Bootstrap .carousel-caption CSS..

.carousel-caption {
      max-width: 550px;
      padding: 0 20px;
      margin:0 auto;
      margin-top: 200px;
      text-align:center;
}

Here is a Bootply to demonstrate

---

Related Topics