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

Error while running script in elastic search , gateway timeout

Image
0 while running script in elastic search, I got 504 Gateway timeout error. { "query": { "bool": { "filter": { "script": { "script": " doc['creted_date'].date.getMonthOfYear() == 12 " } } } }, "aggs": { "test": { "date_histogram": { "field": "creted_date", "interval": "month", "format": "MMM" }, "aggs": { "cost": { "sum": { "field": "cost" } } }
Read more

Adding quotations to stringified JSON object values

Image
0 My stringified object data doesn't include quotation marks around object values, which errors when attempting JSON.parse() : '{ "affiliation": CORPORATE, "userId": 75c35d1c-5d12-4485-8fa8-b2f1551a3e6e }' I need the string to be: '{ "affiliation": "CORPORATE", "userId": "75c35d1c-5d12-4485-8fa8-b2f1551a3e6e" }' I'm using this regex to add quotes to the object keys: var newStr = str.replace(/(['"])?([a-z0-9A-Z_]+)(['"])?:/g, '"$2": '); For instance: '{ affiliation: CORPORATE }' to '{ "affiliation": CORPORATE }' There are only string values in my data, so I don't need to check value types. How can I alter my regex expression to add quotations to
Read more