0

I have a deck of bootstrap cards that looks as follows: 

<div class="card-deck">
    <div class="card">
        <img class="card-img-top" src=".." alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>
    <div class="card">
        <img class="card-img-top" src=".." alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>
    <div class="card">
        <img class="card-img-top" src=".." alt="Card image cap">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>
</div>

The problem is that i want them to stack in such a way that the rows looks the same. Currently, when the screen is at a size such that 2 of the cards are on top and one is on the bottom, the cards are different sizes. I want it to be so that the cards are always the same size as each other, and in the case where there are 3 cards and only 2 will fit horizontally, the 3rd card is the same size as the 2 on top, however floated to the left. The problem I am having is that i cannot simply set min and max widths since the size of the cards changes, I just want the size of them to always change together so that they are the same.
current result desired result example

I would like it to look like the desired result (without the card on the bottom right)

Erubiel
  • 2,934
  • 14
  • 32
  • 1
    Hi, I would suggest editing your post. You can for example include screenshot of the current result as well as your desired outcome, give a few examples of what you tried, and most importantly, state your question. https://stackoverflow.com/help/how-to-ask – Michal Aug 29 '18 at 01:26
  • You may have to use JavaScript to detect which card has the largest width or largest height, and then apply that value to all cards loaded on page forcefully. you can do this on window load or window resize or both. – klewis Aug 29 '18 at 02:23
  • I feel like there should be an easy way of doing this with bootstrap though. –  Aug 29 '18 at 02:27
  • This posting may be helpful for you - https://stackoverflow.com/questions/46611092/equal-height-of-columns-in-bootstrap-4 – klewis Aug 29 '18 at 02:37

2 Answers2

0

Maybe try wrapping your cards into a container and then rows.

Ryan Dionne
  • 1
  • 1
0

Since this is not expected behavior on cards, try placing them inside rows and columns and adding the expected size for each column.

<div class="row">
    <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card">
         ...
        </div>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card">
         ...
        </div>
    </div>
    <div class="col-sm-6 col-md-4 col-lg-3">
        <div class="card">
         ...
        </div>
    </div>
</div>

if you end up with different height cards, add a rule somewhere or a new class with a rule for height: 100%; and apply it to the card.

Erubiel
  • 2,934
  • 14
  • 32
  • This works well. The only thing is that it seems to expect 4 cards. If there is 3 cards, and the width of the screen is devently large there will be a large amount of unused space. The cards should fill the entire amount allotted by the screen without padding –  Aug 29 '18 at 02:49
  • Maybe add a desired example with three cards somehow? you want the third card to occupy the whole space? you can do it with `col-sm-12` – Erubiel Aug 29 '18 at 02:51
  • Basically I just need to change the bootstrap breakpoints to fix this. For lg I want it to break at 1000 as opposed to the 767. Do you know of an easy way to overwrite this without going into the core files? I tried rewriting the media query but it does nothing. –  Aug 29 '18 at 03:06
  • use !important for every rule, also, try placing the styles on the html page instead of a style sheet, since they apply on the following order of importance: direct style attribute, style between style tags inside the html page, style loaded from files. – Erubiel Aug 29 '18 at 03:09
  • But i wouldn't recommend changing cols breakpoints, make your own class and apply it to override. and if you change something in your files do a hard reload erasing cache – Erubiel Aug 29 '18 at 03:10
  • Even with overriding the query, I think there are multiple queries so its tricky to find which ones to change –  Aug 29 '18 at 03:12
  • i think you want xl instead of lg! – Erubiel Aug 29 '18 at 03:13