0

I did a thumbnail with some images . I'm using bootstrap.

Below each image I want to put a title .

The problem is when the title is large, it breaks to a second line , making the thumbnail become disorganized .

here the what issue https://s17.postimg.org/v4116i54f/pic.png

anyone know how to fix this?

<div class="col-lg-3 col-sm-6 videoitem">
                                <div class="b-video">
                                    <div class="v-img">
                                        <a href="single-video-tabs.html"><img src="http://domain/cover/7604.jpg" class="img-rounded" width='270' height='169' alt=""></a>
                                        <div class="time">3:50</div>
                                    </div>
                                    <div class="v-desc">
                                        <a href=".html" >title</a>
                                    </div>
                                    <div class="v-views">
                                        27,548 views. <span class="v-percent"><span class="v-circle"></span> 78%</span>
                                    </div>
                                </div>
                            </div>
Michael Petch
  • 46,082
  • 8
  • 107
  • 198
user7339106
  • 21
  • 3

2 Answers2

0

You have two possibilities here:

Either force one-line titles with height, overflow and text-overflow

Or clear the floats after every 4 items using some kind of clearfix

If you are not much concerned about browser support you can also try Bootstrap 4 which implements grid using flexbox

pwolaq
  • 6,343
  • 19
  • 45
0

You can add a min-height for the title or you can use to -webkit-line-clamp: 2;like this answer https://stackoverflow.com/a/13924997/7565713

medgarin
  • 1