13

Using Bootstrap 3, I want to have square tiled menu that looks like Bootstrap's thumbnail (http://getbootstrap.com/components/#thumbnails). The code there to get tiled display is:

<div class="col-md-3 col-sm-4 col-xs-6">
  <a href="#x" class="thumbnail">
    <img src="http://placehold.it/250x250" alt="Image" class="img-responsive">
  </a>
</div>

I just want to replace the img placeholder as (vertically aligned) html text. Hence, I thought I can just do the following:

<div class="col-md-3 col-sm-4 col-xs-6">
  <a href="#x" class="thumbnail purple">Homepage</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
  <a href="#x" class="thumbnail purple">View Profile</a>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
  <a href="#x" class="thumbnail purple">Something 2 lines</a>
</div>

And this is what I got:

enter image description here

The placeholder examples have each tile dynamically shaped to stay as square tiles, and I want mine, in html/css/js, to be that way too. Is it possible, or do I have to use an img there?

Alex
  • 3,491
  • 4
  • 15
  • 15
  • Possible duplicate of https://stackoverflow.com/questions/19504755/bootstrap-3-how-to-create-responsive-square-thumbnail-divs – BlueCacti Jan 23 '14 at 21:13
  • I may be wrong but that doesn't seem like a duplicate. the bootply example doesn't have squared tiles. – Alex Jan 23 '14 at 21:39
  • The question is the same: "How to create responsive, square .thumbnail divs" – BlueCacti Jan 23 '14 at 22:07

1 Answers1

13

If you want them to always stay square, you can use a dummy placeholder with 100% margin before the thumbnail, and then absolute position the thumbnail...

CSS:

.dummy {
    margin-top: 100%;
}
.thumbnail {
    position: absolute;
    top: 15px;
    bottom: 0;
    left: 15px;
    right: 0;
}

http://bootply.com/108128

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Cool! that gets me the square. Last thing: how do I vertically center that text? I tried stuff like this (http://stackoverflow.com/questions/9249359/text-vertical-align-in-a-div?lq=1) but doesn't work. – Alex Jan 23 '14 at 21:00
  • Click on the Bootply link. He used a top-padding of 36% to drop the text to about the middle – BlueCacti Jan 23 '14 at 21:11
  • 3
    Or, I just updated it again with `padding-top:calc(50% - 30px);` which seems to be more accurate, but may not be cross-browser friendly. – Carol Skelly Jan 23 '14 at 21:15