Bootstrap 3 Dynamic image gallery with expanding tiles












1















I have the following image represented here as a picture



Initial Load



And the HTML code that paints this.



<div id="Gallery1" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>

<div id="Gallery2" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>

<div id="Gallery3" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>

<div id="Gallery4" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>

<div id="Gallery5" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>

<div id="Gallery6" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>

<div id="Gallery7" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>

<div id="Gallery8" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>


I have a small button inside each div to make it expand and show more details, but whenever I click on any of the buttons, the following happens.



After expanding



Also, this is the CSS used for the gallery-outer class name.



display: inline-block;

zoom: 1;

text-align: center;

vertical-align: top;


And this is the gallery-inner class name



top: 0;

left: 0;

bottom: 0;

right: 0;

min-height: 430px;


Any ideas on a workaround for this? Sorry I don't have a CodePen, I have adapted the code to protect the real one.






css3 twitter-bootstrap-3







share|improve this question























  • Post the HTML of a single tile, please.

    – Razvan Zamfir
    Nov 13 '18 at 16:16











  • Please check this answer. The heights are not animated (you can do he animation yourself) but the grid might suit your needs.

    – Razvan Zamfir
    Nov 13 '18 at 21:54











  • I have added an answer involving Bootstrap 3, not Bootstrap 4

    – Razvan Zamfir
    Nov 14 '18 at 21:34


















1















I have the following image represented here as a picture



Initial Load



And the HTML code that paints this.



<div id="Gallery1" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>

<div id="Gallery2" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>

<div id="Gallery3" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>

<div id="Gallery4" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>

<div id="Gallery5" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>

<div id="Gallery6" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>

<div id="Gallery7" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>

<div id="Gallery8" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>


I have a small button inside each div to make it expand and show more details, but whenever I click on any of the buttons, the following happens.



After expanding



Also, this is the CSS used for the gallery-outer class name.



display: inline-block;

zoom: 1;

text-align: center;

vertical-align: top;


And this is the gallery-inner class name



top: 0;

left: 0;

bottom: 0;

right: 0;

min-height: 430px;


Any ideas on a workaround for this? Sorry I don't have a CodePen, I have adapted the code to protect the real one.






css3 twitter-bootstrap-3







share|improve this question























  • Post the HTML of a single tile, please.

    – Razvan Zamfir
    Nov 13 '18 at 16:16











  • Please check this answer. The heights are not animated (you can do he animation yourself) but the grid might suit your needs.

    – Razvan Zamfir
    Nov 13 '18 at 21:54











  • I have added an answer involving Bootstrap 3, not Bootstrap 4

    – Razvan Zamfir
    Nov 14 '18 at 21:34
















1












1








1


0






I have the following image represented here as a picture



Initial Load



And the HTML code that paints this.



<div id="Gallery1" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>

<div id="Gallery2" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>

<div id="Gallery3" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>

<div id="Gallery4" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>

<div id="Gallery5" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>

<div id="Gallery6" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>

<div id="Gallery7" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>

<div id="Gallery8" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>


I have a small button inside each div to make it expand and show more details, but whenever I click on any of the buttons, the following happens.



After expanding



Also, this is the CSS used for the gallery-outer class name.



display: inline-block;

zoom: 1;

text-align: center;

vertical-align: top;


And this is the gallery-inner class name



top: 0;

left: 0;

bottom: 0;

right: 0;

min-height: 430px;


Any ideas on a workaround for this? Sorry I don't have a CodePen, I have adapted the code to protect the real one.






css3 twitter-bootstrap-3







share|improve this question














I have the following image represented here as a picture



Initial Load



And the HTML code that paints this.



<div id="Gallery1" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>

<div id="Gallery2" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>

<div id="Gallery3" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>

<div id="Gallery4" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>

<div id="Gallery5" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>

<div id="Gallery6" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>

<div id="Gallery7" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>

<div id="Gallery8" class="col-lg-3 col-md-3 col-sm-6 col-xs-12 gallery-outer">

    <div class="product-tile-inner">...</div>

</div>


I have a small button inside each div to make it expand and show more details, but whenever I click on any of the buttons, the following happens.



After expanding



Also, this is the CSS used for the gallery-outer class name.



display: inline-block;

zoom: 1;

text-align: center;

vertical-align: top;


And this is the gallery-inner class name



top: 0;

left: 0;

bottom: 0;

right: 0;

min-height: 430px;


Any ideas on a workaround for this? Sorry I don't have a CodePen, I have adapted the code to protect the real one.






css3 twitter-bootstrap-3




css3 twitter-bootstrap-3






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 13 '18 at 14:46









MayhemMayhem

314317




314317













  • Post the HTML of a single tile, please.

    – Razvan Zamfir
    Nov 13 '18 at 16:16











  • Please check this answer. The heights are not animated (you can do he animation yourself) but the grid might suit your needs.

    – Razvan Zamfir
    Nov 13 '18 at 21:54











  • I have added an answer involving Bootstrap 3, not Bootstrap 4

    – Razvan Zamfir
    Nov 14 '18 at 21:34





















  • Post the HTML of a single tile, please.

    – Razvan Zamfir
    Nov 13 '18 at 16:16











  • Please check this answer. The heights are not animated (you can do he animation yourself) but the grid might suit your needs.

    – Razvan Zamfir
    Nov 13 '18 at 21:54











  • I have added an answer involving Bootstrap 3, not Bootstrap 4

    – Razvan Zamfir
    Nov 14 '18 at 21:34



















Post the HTML of a single tile, please.

– Razvan Zamfir
Nov 13 '18 at 16:16





Post the HTML of a single tile, please.

– Razvan Zamfir
Nov 13 '18 at 16:16













Please check this answer. The heights are not animated (you can do he animation yourself) but the grid might suit your needs.

– Razvan Zamfir
Nov 13 '18 at 21:54





Please check this answer. The heights are not animated (you can do he animation yourself) but the grid might suit your needs.

– Razvan Zamfir
Nov 13 '18 at 21:54













I have added an answer involving Bootstrap 3, not Bootstrap 4

– Razvan Zamfir
Nov 14 '18 at 21:34







I have added an answer involving Bootstrap 3, not Bootstrap 4

– Razvan Zamfir
Nov 14 '18 at 21:34














2 Answers
2






active

oldest

votes


















0














Make a grid with items that will always have equal height per row. It can be done with Bootstrap 3 and a little more custom CSS:






$('.btn-block').on('click', function() {

  var $block = $(this).closest(".product-tile-inner");

  $block.height("+=30");

});

.grid {

  display: flex;

  flex-wrap: wrap;

}



.grid>[class*='col-'] {

  display: flex;

  flex-direction: column;

  margin-bottom: 25px;

}



.product-tile-inner {

  position: relative;

}



.product-tile-inner img {

  width: 100%;

  height: auto;

}



.product-tile-inner .btn {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  border-radius: 0;

  opacity: .85;

}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<div class="container">

  <div class="grid">

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

  </div>

</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>








share|improve this answer


























  • Why is the flex-direction: column?

    – Mayhem
    Nov 15 '18 at 8:23











  • @Mayhem It is not necessary in this particular layout, but just in case your layout is a bit different.

    – Razvan Zamfir
    Nov 15 '18 at 10:33



















0














You can use Bootstrap 4 with flexbox to make a grid with items that will always have equal height per row:






$('.btn-block').on('click', function() {

  var $block = $(this).closest(".product-tile-inner");

  $block.height("+=30");

});

.grid>[class*='col-'] {

  display: flex;

  flex-direction: column;

  margin-bottom: 25px;

}



.product-tile-inner {

  position: relative;

}



.product-tile-inner img {

  width: 100%;

  height: auto;

}



.product-tile-inner .btn {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  border-radius: 0;

  opacity: .85;

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />



<div class="container">

  <div class="grid d-flex flex-wrap">

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

  </div>

</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>








share|improve this answer


























  • Hello Razvan, thanks for the detailed answer here. Although I really appreciate your effort on this, I was expecting an alternative with Bootstrap 3, not 4

    – Mayhem
    Nov 14 '18 at 9:35











  • @Mayhem If I change to Bootstrap 3, and get the same result, would it be ok?

    – Razvan Zamfir
    Nov 14 '18 at 21:28











  • That would be ideal, yes

    – Mayhem
    Nov 15 '18 at 8:16











Your Answer






StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53283553%2fbootstrap-3-dynamic-image-gallery-with-expanding-tiles%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























2 Answers
2






active

oldest

votes








2 Answers
2






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














Make a grid with items that will always have equal height per row. It can be done with Bootstrap 3 and a little more custom CSS:






$('.btn-block').on('click', function() {

  var $block = $(this).closest(".product-tile-inner");

  $block.height("+=30");

});

.grid {

  display: flex;

  flex-wrap: wrap;

}



.grid>[class*='col-'] {

  display: flex;

  flex-direction: column;

  margin-bottom: 25px;

}



.product-tile-inner {

  position: relative;

}



.product-tile-inner img {

  width: 100%;

  height: auto;

}



.product-tile-inner .btn {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  border-radius: 0;

  opacity: .85;

}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<div class="container">

  <div class="grid">

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

  </div>

</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>








share|improve this answer


























  • Why is the flex-direction: column?

    – Mayhem
    Nov 15 '18 at 8:23











  • @Mayhem It is not necessary in this particular layout, but just in case your layout is a bit different.

    – Razvan Zamfir
    Nov 15 '18 at 10:33
















0














Make a grid with items that will always have equal height per row. It can be done with Bootstrap 3 and a little more custom CSS:






$('.btn-block').on('click', function() {

  var $block = $(this).closest(".product-tile-inner");

  $block.height("+=30");

});

.grid {

  display: flex;

  flex-wrap: wrap;

}



.grid>[class*='col-'] {

  display: flex;

  flex-direction: column;

  margin-bottom: 25px;

}



.product-tile-inner {

  position: relative;

}



.product-tile-inner img {

  width: 100%;

  height: auto;

}



.product-tile-inner .btn {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  border-radius: 0;

  opacity: .85;

}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<div class="container">

  <div class="grid">

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

  </div>

</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>








share|improve this answer


























  • Why is the flex-direction: column?

    – Mayhem
    Nov 15 '18 at 8:23











  • @Mayhem It is not necessary in this particular layout, but just in case your layout is a bit different.

    – Razvan Zamfir
    Nov 15 '18 at 10:33














0












0








0







Make a grid with items that will always have equal height per row. It can be done with Bootstrap 3 and a little more custom CSS:






$('.btn-block').on('click', function() {

  var $block = $(this).closest(".product-tile-inner");

  $block.height("+=30");

});

.grid {

  display: flex;

  flex-wrap: wrap;

}



.grid>[class*='col-'] {

  display: flex;

  flex-direction: column;

  margin-bottom: 25px;

}



.product-tile-inner {

  position: relative;

}



.product-tile-inner img {

  width: 100%;

  height: auto;

}



.product-tile-inner .btn {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  border-radius: 0;

  opacity: .85;

}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<div class="container">

  <div class="grid">

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

  </div>

</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>








share|improve this answer















Make a grid with items that will always have equal height per row. It can be done with Bootstrap 3 and a little more custom CSS:






$('.btn-block').on('click', function() {

  var $block = $(this).closest(".product-tile-inner");

  $block.height("+=30");

});

.grid {

  display: flex;

  flex-wrap: wrap;

}



.grid>[class*='col-'] {

  display: flex;

  flex-direction: column;

  margin-bottom: 25px;

}



.product-tile-inner {

  position: relative;

}



.product-tile-inner img {

  width: 100%;

  height: auto;

}



.product-tile-inner .btn {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  border-radius: 0;

  opacity: .85;

}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<div class="container">

  <div class="grid">

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

  </div>

</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>








$('.btn-block').on('click', function() {

  var $block = $(this).closest(".product-tile-inner");

  $block.height("+=30");

});

.grid {

  display: flex;

  flex-wrap: wrap;

}



.grid>[class*='col-'] {

  display: flex;

  flex-direction: column;

  margin-bottom: 25px;

}



.product-tile-inner {

  position: relative;

}



.product-tile-inner img {

  width: 100%;

  height: auto;

}



.product-tile-inner .btn {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  border-radius: 0;

  opacity: .85;

}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<div class="container">

  <div class="grid">

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

  </div>

</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>





$('.btn-block').on('click', function() {

  var $block = $(this).closest(".product-tile-inner");

  $block.height("+=30");

});

.grid {

  display: flex;

  flex-wrap: wrap;

}



.grid>[class*='col-'] {

  display: flex;

  flex-direction: column;

  margin-bottom: 25px;

}



.product-tile-inner {

  position: relative;

}



.product-tile-inner img {

  width: 100%;

  height: auto;

}



.product-tile-inner .btn {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  border-radius: 0;

  opacity: .85;

}

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">



<div class="container">

  <div class="grid">

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

  </div>

</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>






share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 16 '18 at 12:20

























answered Nov 14 '18 at 21:32









Razvan ZamfirRazvan Zamfir

93711058




93711058













  • Why is the flex-direction: column?

    – Mayhem
    Nov 15 '18 at 8:23











  • @Mayhem It is not necessary in this particular layout, but just in case your layout is a bit different.

    – Razvan Zamfir
    Nov 15 '18 at 10:33



















  • Why is the flex-direction: column?

    – Mayhem
    Nov 15 '18 at 8:23











  • @Mayhem It is not necessary in this particular layout, but just in case your layout is a bit different.

    – Razvan Zamfir
    Nov 15 '18 at 10:33

















Why is the flex-direction: column?

– Mayhem
Nov 15 '18 at 8:23





Why is the flex-direction: column?

– Mayhem
Nov 15 '18 at 8:23













@Mayhem It is not necessary in this particular layout, but just in case your layout is a bit different.

– Razvan Zamfir
Nov 15 '18 at 10:33





@Mayhem It is not necessary in this particular layout, but just in case your layout is a bit different.

– Razvan Zamfir
Nov 15 '18 at 10:33













0














You can use Bootstrap 4 with flexbox to make a grid with items that will always have equal height per row:






$('.btn-block').on('click', function() {

  var $block = $(this).closest(".product-tile-inner");

  $block.height("+=30");

});

.grid>[class*='col-'] {

  display: flex;

  flex-direction: column;

  margin-bottom: 25px;

}



.product-tile-inner {

  position: relative;

}



.product-tile-inner img {

  width: 100%;

  height: auto;

}



.product-tile-inner .btn {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  border-radius: 0;

  opacity: .85;

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />



<div class="container">

  <div class="grid d-flex flex-wrap">

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

  </div>

</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>








share|improve this answer


























  • Hello Razvan, thanks for the detailed answer here. Although I really appreciate your effort on this, I was expecting an alternative with Bootstrap 3, not 4

    – Mayhem
    Nov 14 '18 at 9:35











  • @Mayhem If I change to Bootstrap 3, and get the same result, would it be ok?

    – Razvan Zamfir
    Nov 14 '18 at 21:28











  • That would be ideal, yes

    – Mayhem
    Nov 15 '18 at 8:16
















0














You can use Bootstrap 4 with flexbox to make a grid with items that will always have equal height per row:






$('.btn-block').on('click', function() {

  var $block = $(this).closest(".product-tile-inner");

  $block.height("+=30");

});

.grid>[class*='col-'] {

  display: flex;

  flex-direction: column;

  margin-bottom: 25px;

}



.product-tile-inner {

  position: relative;

}



.product-tile-inner img {

  width: 100%;

  height: auto;

}



.product-tile-inner .btn {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  border-radius: 0;

  opacity: .85;

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />



<div class="container">

  <div class="grid d-flex flex-wrap">

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

  </div>

</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>








share|improve this answer


























  • Hello Razvan, thanks for the detailed answer here. Although I really appreciate your effort on this, I was expecting an alternative with Bootstrap 3, not 4

    – Mayhem
    Nov 14 '18 at 9:35











  • @Mayhem If I change to Bootstrap 3, and get the same result, would it be ok?

    – Razvan Zamfir
    Nov 14 '18 at 21:28











  • That would be ideal, yes

    – Mayhem
    Nov 15 '18 at 8:16














0












0








0







You can use Bootstrap 4 with flexbox to make a grid with items that will always have equal height per row:






$('.btn-block').on('click', function() {

  var $block = $(this).closest(".product-tile-inner");

  $block.height("+=30");

});

.grid>[class*='col-'] {

  display: flex;

  flex-direction: column;

  margin-bottom: 25px;

}



.product-tile-inner {

  position: relative;

}



.product-tile-inner img {

  width: 100%;

  height: auto;

}



.product-tile-inner .btn {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  border-radius: 0;

  opacity: .85;

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />



<div class="container">

  <div class="grid d-flex flex-wrap">

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

  </div>

</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>








share|improve this answer















You can use Bootstrap 4 with flexbox to make a grid with items that will always have equal height per row:






$('.btn-block').on('click', function() {

  var $block = $(this).closest(".product-tile-inner");

  $block.height("+=30");

});

.grid>[class*='col-'] {

  display: flex;

  flex-direction: column;

  margin-bottom: 25px;

}



.product-tile-inner {

  position: relative;

}



.product-tile-inner img {

  width: 100%;

  height: auto;

}



.product-tile-inner .btn {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  border-radius: 0;

  opacity: .85;

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />



<div class="container">

  <div class="grid d-flex flex-wrap">

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

  </div>

</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>








$('.btn-block').on('click', function() {

  var $block = $(this).closest(".product-tile-inner");

  $block.height("+=30");

});

.grid>[class*='col-'] {

  display: flex;

  flex-direction: column;

  margin-bottom: 25px;

}



.product-tile-inner {

  position: relative;

}



.product-tile-inner img {

  width: 100%;

  height: auto;

}



.product-tile-inner .btn {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  border-radius: 0;

  opacity: .85;

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />



<div class="container">

  <div class="grid d-flex flex-wrap">

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

  </div>

</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>





$('.btn-block').on('click', function() {

  var $block = $(this).closest(".product-tile-inner");

  $block.height("+=30");

});

.grid>[class*='col-'] {

  display: flex;

  flex-direction: column;

  margin-bottom: 25px;

}



.product-tile-inner {

  position: relative;

}



.product-tile-inner img {

  width: 100%;

  height: auto;

}



.product-tile-inner .btn {

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  border-radius: 0;

  opacity: .85;

}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />



<div class="container">

  <div class="grid d-flex flex-wrap">

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

    <div class="col-xs-12 col-sm-4 col-md-3">

      <div class="product-tile-inner">

        <img src="https://picsum.photos/600/600/?gravity=west">

        <div class="btn btn-block btn-sm btn-primary">More</div>

      </div>

    </div>

  </div>

</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>






share|improve this answer














share|improve this answer



share|improve this answer








edited Nov 14 '18 at 21:47

























answered Nov 13 '18 at 21:51









Razvan ZamfirRazvan Zamfir

93711058




93711058













  • Hello Razvan, thanks for the detailed answer here. Although I really appreciate your effort on this, I was expecting an alternative with Bootstrap 3, not 4

    – Mayhem
    Nov 14 '18 at 9:35











  • @Mayhem If I change to Bootstrap 3, and get the same result, would it be ok?

    – Razvan Zamfir
    Nov 14 '18 at 21:28











  • That would be ideal, yes

    – Mayhem
    Nov 15 '18 at 8:16



















  • Hello Razvan, thanks for the detailed answer here. Although I really appreciate your effort on this, I was expecting an alternative with Bootstrap 3, not 4

    – Mayhem
    Nov 14 '18 at 9:35











  • @Mayhem If I change to Bootstrap 3, and get the same result, would it be ok?

    – Razvan Zamfir
    Nov 14 '18 at 21:28











  • That would be ideal, yes

    – Mayhem
    Nov 15 '18 at 8:16

















Hello Razvan, thanks for the detailed answer here. Although I really appreciate your effort on this, I was expecting an alternative with Bootstrap 3, not 4

– Mayhem
Nov 14 '18 at 9:35





Hello Razvan, thanks for the detailed answer here. Although I really appreciate your effort on this, I was expecting an alternative with Bootstrap 3, not 4

– Mayhem
Nov 14 '18 at 9:35













@Mayhem If I change to Bootstrap 3, and get the same result, would it be ok?

– Razvan Zamfir
Nov 14 '18 at 21:28





@Mayhem If I change to Bootstrap 3, and get the same result, would it be ok?

– Razvan Zamfir
Nov 14 '18 at 21:28













That would be ideal, yes

– Mayhem
Nov 15 '18 at 8:16





That would be ideal, yes

– Mayhem
Nov 15 '18 at 8:16


















draft saved

draft discarded




















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid …



  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.


To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53283553%2fbootstrap-3-dynamic-image-gallery-with-expanding-tiles%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







-

Popular posts from this blog

Florida Star v. B. J. F.

Image
Florida Star v. B. J. F. From Wikipedia, the free encyclopedia Jump to navigation Jump to search United States Supreme Court case Florida Star v. B. J. F. Supreme Court of the United States Argued March 21, 1989 Decided June 21, 1989 Full case name The Florida Star v. B. J. F. Citations 491 U.S. 524 ( more ) 109 S. Ct. 2603; 105 L. Ed. 2d 443; 1989 U.S. LEXIS 3120; 57 U.S.L.W. 4816; 16 Media L. Rep. 1801 Prior history The Florida Star v. B.J.F., 530 So.2d 286 (1988) Supreme Court of Florida; Florida Star v. B.J.F., 499 So.2d 883 (1986) Fla. Dist. Court of Appeals Holding Florida Stat. § 794.03 is unconstitutional to the extent it makes the truthful reporting of information that was a matter of public record unlawful, as it violates the First Amendment. Court membership Chief Justice William Rehnquist Associate Justices William J. Brennan Jr.  · Byron White Thurgood Marshall  · Harry Blac...
Read more

Danny Elfman

Image
Danny Elfman From Wikipedia, the free encyclopedia Jump to navigation Jump to search Danny Elfman Elfman at the 2010 San Diego Comic-Con Born Daniel Robert Elfman ( 1953-05-29 ) May 29, 1953 (age 65) Los Angeles, California, U.S. Spouse(s) Bridget Fonda ( m.  2003) Children 1 Musical career Genres Rock [1] ska [2] new wave film music video game music Occupation(s) Composer, singer, songwriter, record producer Instruments Trombone guitar percussion vocals keyboards [3] Years active 1972–present Associated acts Oingo Boingo James Newton Howard Daniel Robert Elfman (born May 29, 1953) is an American composer, singer, songwriter, and record producer. Elfman first became known for being the lead singer and songwriter for the band Oingo Boingo from 1974 to 1995. He is well known for scoring films and television shows, particularly his frequent collabora...
Read more

Lugert, Oklahoma

Image
Unincorporated community in Oklahoma, United States Lugert, Oklahoma Unincorporated community Foundations from the town of Lugert at the bottom of Lake Altus-Lugert Lugert, Oklahoma Location within the state of Oklahoma Coordinates: 34°53′45″N 99°16′31″W  /  34.89583°N 99.27528°W  / 34.89583; -99.27528 Coordinates: 34°53′45″N 99°16′31″W  /  34.89583°N 99.27528°W  / 34.89583; -99.27528 Country United States State Oklahoma County Kiowa Time zone UTC-6 (Central (CST))  • Summer (DST) UTC-5 (CDT) GNIS feature ID 1100597 Lugert is an unincorporated community in Kiowa County, Oklahoma. [1] The town of Lugert was founded in 1901 on 80 acres (320,000 m 2 ). In the town, there was a general store that housed the Post office and sold dry goods, school supplies, groceries, harnesses, axes and much more. It was named for Frank Lugert, who had moved to the area in 1898. Lugert owned land where the town was sited and also owned the general st...
Read more