CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Alnedru
Alnedru

Reputation: 2655

Bootstrap 3 Text on the right of thumbnails

I have a question, basically using the thumbnails is ok, and you can get text beneath the tumbnail but i would like to put like 3 tags next to the thumbnail, something like that and would like to have:

enter image description here

Or those parameters outside of the border, but the border should be very close to the thumbnail ...

The code is following:

<div class="col-xs-6 col-md-3">
  <a href="#" class="thumbnail">
    <img data-src="holder.js/100%x180" src="untitled.png" alt="Generic placeholder thumbnail">
    <ul>
    <li>Title</li>
    <li>Location</li>
    <li>Price</li>
    <ul>
  </a>
</div>

From the post and responses i get the following in the fiddle, as well as in my solution, i marked it yellow, as you can see the border is somehow on the top now :( :

enter image description here

enter image description here

This is final screen, still broken: :( enter image description here

Upvotes: 0

Views: 7275

Answers (2)

user6251671
user6251671

Reputation:

The problem is that default bootstrap display property is set to block. Just change it to inline-flex or inline-block and thats it. For example:

<div id="someId" class="col-md-6">
    <a href="#" class="thumbnail">
        <div class="col-md-6">
            <img data-src="holder.js/100%x180" src="untitled.png" alt="Generic placeholder thumbnail">
        </div>
        <div class="col-md-6">
          <ul>
            <li>Title</li>
            <li>Location</li>
            <li>Price</li>
          </ul>
        </div>
    </a>
</div>

Just set id and in css write

#someId .thumbnail{
    display: inline-flex;
}

Upvotes: 3

rand0m
rand0m

Reputation: 851

that's quite easy, just divide the region in 2 equal parts and fill in the contents.

http://jsfiddle.net/fatgamer85/D5M7E/3/

<div class="col-md-6">
    <a href="#" class="thumbnail">
        <div class="col-md-6">
            <img data-src="holder.js/100%x180" src="untitled.png" alt="Generic placeholder thumbnail">
        </div>
        <div class="col-md-6">
          <ul>
            <li>Title</li>
            <li>Location</li>
            <li>Price</li>
          </ul>
        </div>
    </a>
</div>

Upvotes: 1

Related Questions