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-14 14:06:21Z

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, 2020 at 14:06

answered Aug 14, 2020 at 14:00

devd

7034 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

devd Over a year ago

Updated jsFiddle link>> jsfiddle.net/j8rhnsqd/1

trkaplan Over a year ago

Do we need align-self : stretch; ?

devd Over a year ago

No, not necessary. Updating the answer.

noblerare Over a year ago

@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.

devd Over a year ago

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.

|

Collectives™ on Stack Overflow

React - Bootstrap - Making columns all the same height

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related