1

I have a grid of Client Cards that change sizes depending on the width of the window(1 per row/2 per row/3 per row...). Theses Card's height expand using Bootstrap when you reduce the size of the window.

The problem is when the first card (or second when 3 per row) grow in height there's not enough space for another card under it so the rightmost cards pile up.

Here's a example of the problem. Example

I've tried display: inline; and its different values on the div but can't get the needed result.

Code of every div:

<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12">
    <div class="widget widget-client">
        <div class="client-profile">...Profile Picture...</div>
        <div>...Infos....</div>
        <div class="widget-actions clearfix">...Bottom actions...</div>
    </div>
</div>

My goal is to always have 2 (or 3, depending on the screen size) cards per row.

How can I achieve that result?

Void Dark
  • 63
  • 5
  • 1
    Since Bootstrap 3 was pre-flexbox, this is going to be a problem. Are you able use a set height for your widget div? – slynagh Jun 03 '19 at 19:59
  • it uses min-heigth: 180px; but I want it to increase if the content cannot fit. – Void Dark Jun 03 '19 at 20:12
  • This is a common problem and has been answered before https://stackoverflow.com/questions/22310912/bootstrap-row-with-columns-of-different-height . In my opinion though the layout will look awful if your widgets have varying height. – slynagh Jun 04 '19 at 07:53
  • also there is no col-xl-* class in Bootstrap 3 :) – slynagh Jun 04 '19 at 07:59
  • @slynagh Its a custom class made by us, its there for dem 4k sreens that most users dont have (only devs really have 4k). Thanks for the link btw the clearfix solution worked – Void Dark Jun 04 '19 at 15:20

0 Answers0