How can i give these card elements the same size?

Question

With Css or bootstrap or whatever, how can i give the cards in the example the same height and weight??

I have tried using the .card-deck class (Bootstrap .card-deck) but it wont work properly because of the horizontal scroll that can have alot of card elements.

<div class="container-fluid">
    <div class="scrollmenu" id="main-row">
        <div id="main-element" class="card text-center floc-card">
            <div class="card-body">
                <h5 class="card-title">Title</h5>
                <h6 class="card-subtitle mb-2 text-muted">Description</h6>
                <p class="card-text font-weight-bold">
                Some text
                </p>
                <button type="button" class="btn btn-outline-primary bg-white files-btn">
                Button
                </button>
            </div>
        </div>

        .....
    </div>
</div>

Here is the Code Example

Does this answer your question? [Setting equal heights for div's with jQuery](https://stackoverflow.com/questions/11688250/setting-equal-heights-for-divs-with-jquery) — ttrasn, Nov 04 '19 at 08:14
Thank you, i didnt look very much into it but i am sure that the more advanced answer in there would've have been very useful. — looren, Nov 04 '19 at 08:51

score 0 · Accepted Answer · answered Nov 04 '19 at 08:21

You can give custom css to parent container and inner div below

div.scrollmenu {
    overflow: auto;
    white-space: nowrap;
    border-top: 5px solid black;
    padding: 25px;
    width: 100%;
    display:flex;
    flex-wrap:nowrap;
}

div.scrollmenu .card {
    flex: 0 0 auto;
}

How can i give these card elements the same size?

1 Answers1