0

I'm using the class="thumbnail" and class="caption" from bootstrap to generate this presentations.

Problem is that when the Title it's 1 row longer for one of the cards it becomes bigger and it brakes my col-md-3 or col-md-4

How do I make sure that all the cards will have the same size as long as the Title will extend on two rows.

Notice how the height increases as the title gets longer

Thank You!

It extends when the title its longer then the others

Daniel
  • 311
  • 3
  • 5
  • 16
  • Are you referring to the height of the "cards"? – Cave Johnson Aug 31 '16 at 22:04
  • Yes you can see that the one who has a 2 line title has a bigger height then the others. – Daniel Aug 31 '16 at 22:05
  • Unfortunately this is normal behavior and bootstrap can't keep all columns the same height. I recommend looking at this question: https://stackoverflow.com/questions/19695784/how-can-i-make-bootstrap-columns-all-the-same-height. I recommend using Solution 3 in the accepted answer. – Cave Johnson Aug 31 '16 at 22:08
  • One additional solution is to add a `min-height` style to each column to force them to be a certain height (you can set it to the height of the column with the wrapping title). – Cave Johnson Aug 31 '16 at 22:11
  • @Andrew It should work but the next items will still go a bit up or down. I was just wondering how are you guys approaching this kind of problems. Problem is that this is returned from an API so I have little control over the Title length – Daniel Aug 31 '16 at 22:14
  • **Solution 3** from that question I linked to is probably the best way to handle it. It will ensure that the columns will all be the same height no matter what the API returns. – Cave Johnson Aug 31 '16 at 22:16
  • Tried to apply those properties to my row. But for some reason it displays all inline. Maybe I need to understand that solution better – Daniel Aug 31 '16 at 22:18
  • Hey Daniel we handle such problem by truncating the title from the end, and when user click on title it expands to complete length of it appear as a popup – Irfan Anwar Aug 31 '16 at 22:40
  • see my answer for reference – Irfan Anwar Aug 31 '16 at 22:41

3 Answers3

2

You need to truncate you title see the example:

$('button').on('click', function() {
  $('p').toggleClass('ellipses');
});
.ellipses {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="width:120px">
  <button>Toggle Ellipses</button>
  <p class="ellipses">For more information, please visit: http://csstricks.com/thisisanonexistentandreallylongurltoaddtoanytextinfactwhyareyoustillreadingit.</p>
</div>
Irfan Anwar
  • 1,878
  • 17
  • 30
  • I have used inline width of the title text, but you should take care of it in your css files, thanks – Irfan Anwar Aug 31 '16 at 22:38
  • Very nice method. I should try it and see how it works for my titles. I saw that inline with. There is no problem I can adjust it. Because its going to differ based on my "card" width – Daniel Aug 31 '16 at 22:42
1

You can use Flexbox http://v4-alpha.getbootstrap.com/getting-started/flexbox/ but read the details about browser support. More details about how to use Flexbox Grids can be found here http://v4-alpha.getbootstrap.com/layout/flexbox-grid/

An example http://getbootstrap.com.vn/examples/equal-height-columns/

Waqar Ul Aziz
  • 197
  • 2
  • 9
0

It's terrible Bootstrap mechanics and here are no bulit-in solution to fix it.

You can chose one of next methods to fix it:

  1. You can set fixed height of title block or whole container.

  2. You can calculate height of largest container and set this height to all containers using JS.

  3. You can use one of JS libraries to make pretty mosaic grid(like this). One of libraries to do it - Masonry.

vadjs
  • 325
  • 3
  • 16