CODEWITHSUNDEEP
csstwitter-bootstrap
Itzik Ben Hutta
Itzik Ben Hutta

Reputation: 41

Bootstrap thumbnail with fixed size and scroll bar

I'm allowing users to upload images with caption and it will be uploaded inside of a bootstrap thumbnail, the problem is if the caption is too long it messes up the look of the page. How can I make the thumbnail to be in a fixed size so if the caption will be too long then I will have a scroll bar that will show the rest of the caption. I tried to add scroll bar, but it doesn't help.

<div class="col-md-4">
       <div class="thumbnail" style="overflow-y:scroll;">
        <a href="{{ url('/home', $images->id) }}">
         <img src="{{$images->filename}}" alt="Food">
        </a>
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>{{$images->caption}}</p>
        <p>
           <a href="#" class="btn btn-primary" role="button">Yum!</a> 
           <a href="#" class="btn btn-default" role="button">Comment</a>
        </p>
      </div>
   </div>
</div>

Upvotes: 1

Views: 960

Answers (1)

Tony Gustafsson
Tony Gustafsson

Reputation: 888

Set .caption to a height of anything you like... min-height if they all should be the same height. And also add overflow: hidden, which will stop the content from expanding the height further.

If you don't want the captions to be chopped off, you could either limit their size backend (PHP?), or use CSS ellipsis.

Upvotes: 1

Related Questions