Bootstrap thumbnails position

Question

I am using bootstrap thumbnail class to display a list of players as shown in photo below. The problem some player names exceed a single line and go for a second line which do not make the same dimension for thumbnails. And the real problem I faced is the wrong positioning of the thumbnails as seen in the second row in the photo. How can I fix it? Here is the code:

<div class="row">
  <div ng-repeat="player in $ctrl.players">
  <div class="col-sm-4 col-md-3">
    <div class="thumbnail">
      <img ng-src="{{player.imgpath}}" height="100" width="121" alt="" style="border-radius: 100%"/>
      <div class="caption">
        <h4><span class="badge">{{player.jersey}}</span> {{player.name}}</h4>
        <table class="table">
          <tr>
            <td><b>Position</b></td>
            <td>{{player.position}}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
  </div>
</div>

For the names, you can give a specific height for the thumbnails. Using `white-space: nowrap` might make the names go out of the thumbnails' borders as it prevents line breaks. But for the wrong positioning, it might be a problem with your script. — , Mar 18 '17 at 19:19
This is the classic Bootstrap [height problem](https://medium.com/wdstack/varying-column-heights-in-bootstrap-4e8dd5338643). Also see http://stackoverflow.com/questions/22310912/bootstrap-rows-with-columns-of-different-height and http://stackoverflow.com/questions/38730889/bootstrap-grid-system-new-line-does-not-look-nice/38745719 — Carol Skelly, Mar 18 '17 at 20:14

score 0 · Answer 1 · answered Mar 18 '17 at 18:41

0

You can use nowrap on the names. That way they will only be one line .nowrap { white-space: nowrap ; }

Otherwise i'd recommend using flexbox, not tables to display the team members. It's responsive and you won't have issues like the one on your second row.

answered Mar 18 '17 at 18:41

Boris Yordanov

3
3

nowrap is not good when I have long names like Bastian SCHWEINSTEIGER, it goes outside the border. Also, I can't use flex box since I'm using bootstrap 3.x – EddyG Mar 18 '17 at 19:13

Tariq Javed · Answer 2 · 2017-03-18T18:57:10.613

0

You can use display:inline-block and float:none;

.col-md-*,.col-sm-*,.col-xs-*{
 float:none;
 display: inline-block;
margin-left: -4px;
vertical-align: top;
}

edited Mar 18 '17 at 18:57

answered Mar 18 '17 at 18:50

Tariq Javed

483
3
7

Your solution displays 1 thumbnail per row. I don't want this. Also when changing the size of the page the player name for long one like SCHWEINSTEIGER goes much outside the border. – EddyG Mar 18 '17 at 19:06

Tariq Javed · Answer 3 · 2017-03-18T19:37:55.453

0

.caption h4{
   display: table;
 }

.caption h4 .badge{
display:table-cell;
}

edited Mar 18 '17 at 19:37

answered Mar 18 '17 at 19:15

Tariq Javed

483
3
7

The solution truncates the name of long player names. I don't want this. I don't mind if the content goes for a second line and thought give a larger size for the thumbnail. I just don't want the wrong display that appeared in the first photo I displayed in the main question. – EddyG Mar 18 '17 at 19:24
Again no. Same and even worse. I attached the display output – EddyG Mar 18 '17 at 19:48

Bootstrap thumbnails position

3 Answers3