jquery - How to align buttons in a row of Bootstrap thumbnails? -


i using jquery code align row of bootstrap thumbnails:

<script> function equalheight(group) {         var tallest = 0;         group.each(function() {                var thisheight = $(this).height();                if(thisheight > tallest) {                       tallest = thisheight;                }         });         group.each(function() { $(this).height(tallest); }); }   $(document).ready(function() {        equalheight($(".thumbnail"));  }); </script> 

screenshot:

enter image description here

question:

how can align 4 buttons?

you can using flex. wrap content, except button in div. apply flex-direction:column;justify-content:space-between; on parent div.

here's example.i setting .col fixed width, since doing equivalent thing using jquery.

.col{    width:150px;    padding:0 10px;    margin:5px;    border:1px solid black;    float:left;    display:flex;    flex-direction:column;    height:230px;    justify-content:space-between;  }
<div class="col">    <div>      <h3>family</h3>       <p>this textthis textthis textthis textthis textthis textthis text    textthis textthis text</p>    </div>    <button>click me</button>  </div>  <div class="col">    <div>      <h3>women</h3>      <p>this textthis textthis textthis textthis textthis textthis text</p>    </div>    <button>click me</button>  </div>


Comments

Popular posts from this blog

python - How to insert QWidgets in the middle of a Layout? -

python - serve multiple gunicorn django instances under nginx ubuntu -

module - Prestashop displayPaymentReturn hook url -