CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Daniel
Daniel

Reputation: 311

Fix Bootstrap thumbnail size when a title its too long

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

Upvotes: 0

Views: 689

Answers (3)

vadjs
vadjs

Reputation: 355

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.

Upvotes: 0

Waqar Ul Aziz
Waqar Ul Aziz

Reputation: 197

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/

Upvotes: 1

Irfan Anwar
Irfan Anwar

Reputation: 1918

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>

Upvotes: 2

Related Questions