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:
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
Post a Comment