Using Bootstrap 3, I want to have square tiled menu that looks like Bootstrap's thumbnail (). 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="" 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:

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?

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:

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?

• javascript
• html
• css
• twitter-bootstrap
• twitter-bootstrap-3

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

1 Answer 1

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