React - Bootstrap - Making columns all the same height

Question

Here is a fiddle showing my issue:

In essence, I have a React-Bootstrap <Row> tag and underneath it I am mapping over a list of books that I want rendered as "cards" to the screen. However, because of the size of the content, the heights of the "cards" are all over the place. How do I make the height of the cards to be uniformly the height of the max height of the card in that row?

One thing that may be an issue is that there is only one bootstrap <Row>, is that the issue?

In any case, I've tried the suggestions from stuff like: https://scotch.io/bar-talk/different-tricks-on-how-to-make-bootstrap-columns-all-the-same-height and Bootstrap 4 Cards of same height in columns and Make ReactStrap/Bootstrap4 Cards In Separate Columns Same Height but nothing works.

Here is my actual code:

export class BooksComponent extends React.PureComponent {
    render() {
        return (
            <Row>
                this.props.books.map((b, index) => (
                    <BookComponent
                        key={index}
                        title={b.title}
                        summary={b.summary}
                    />
                ))
            </Row>
        );
    }
}

export class BookComponent extends React.PureComponent {
    render() {
        return (
            <Col md={4}>
                <div className="book-item">
                    <div className="book-title">{this.props.title}</div>
                    <div className="book-summary">{this.props.summary}</div>
                </div>
            </Col>
        );
    }
}

SCSS

.book-item {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid gray;

    .book-title {
        font-size: 1.2rem;
        font-weight: bold;
    }

    .book-summary {
        font-size: 0.9rem;
    }

    &:hover {
        cursor: pointer;
        box-shadow: 1px 1px 5px gray;
    }
}

devd · Accepted Answer · 2020-08-14T14:06:21.973

2

You need to make your .col-md-4 as flex because then only you will be able to stretch the child elements.

.col-md-4 {
    flex: 0 0 33.3333333%;
    max-width: 33.3333333%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    display: flex;
}

edited Aug 14 '20 at 14:06

answered Aug 14 '20 at 14:00

devd

693
4
11

Updated jsFiddle link>> https://jsfiddle.net/j8rhnsqd/1/ – devd Aug 14 '20 at 14:01
2

Do we need `align-self : stretch;` ? – trkaplan Aug 14 '20 at 14:05
No, not necessary. Updating the answer. – devd Aug 14 '20 at 14:07
@devd Thank you for this. One last thing, how do I go about making the widths all the same width? I thought React-Bootstrap was supposed to take care of that for you but it doesn't appear so. – noblerare Aug 14 '20 at 14:14
Bootstrap is indeed taking care of that but its the child of .col-md-4 that is creating issue.In book please use width:100%. It will do the job. – devd Aug 14 '20 at 14:19
@devd This is exactly what I needed. Thank you! – noblerare Aug 14 '20 at 15:27

React - Bootstrap - Making columns all the same height

1 Answers1