Bootstrap 3: How to Create Responsive, Square .Thumbnail Divs

Making a square responsive grid with bootstrap and php

Something like this: the other one must be using javascript

css

.dummy {
  margin-top: 100%;
}

.row {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
}

.item-item {
  flex:0 0 277px;
  margin: 15px 0 0 1%;
  text-align: center;
  padding-top: calc(50% - 30px);
  border: solid black 5px;
}

https://jsfiddle.net/3wym5nhw/4/

how to show the result in thumbnail gridview like pininterest using bootstrap

here you go

HTML

<div class="row">
  <div class="col-lg-12 gallery">
    <img src="http://placekitten.com/200/300" />
    <img src="http://placekitten.com/200/300" />
    <img src="http://placekitten.com/200/300" />
    <img src="http://placekitten.com/200/300" />
    <img src="http://placekitten.com/200/300" />
    <img src="http://placekitten.com/200/300" />
    <img src="http://placekitten.com/200/300" />
    <img src="http://placekitten.com/200/300" />
    <img src="http://placekitten.com/200/300" />
    <img src="http://placekitten.com/200/300" />
    <img src="http://placekitten.com/200/300" />
    <img src="http://placekitten.com/200/300" />
  </div>
</div>

CSS

.gallery img {
  padding: 10px;
}

jsfiddle: http://jsfiddle.net/N7mYY/

Website Thumbnail (Bootstrap)

Put your image as container background

CSS:

.Thumb-Box{
display:inline-block;
width: [your width here];
height: [your height here];
}
.Thumb-Box a{
display:inline-block;
height:100%;
width:100%;
padding:0;
margin:0;
}

HTML:

<div class="Thumb-Box" style="background: url('url');background-position: 0px 0px;"><a href="link here"> </a></div>

"0px 0px" stands for what piece of the thumbnail should be seen
ex: -10px from left and -10px from top

---

Related Topics