title: React - Bootstrap - Making columns all the same height
body: <p>Here is a fiddle showing my issue:</p>
  <p><a href="https://jsfiddle.net/dbfev23h/" rel="nofollow noreferrer">https://jsfiddle.net/dbfev23h/</a></p>
  <p>In essence, I have a React-Bootstrap <code>&lt;Row&gt;</code> tag and underneath it I am mapping over a list of books that I want rendered as &quot;cards&quot; to the screen. However, because of the size of the content, the heights of the &quot;cards&quot; 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?</p>
  <p>One thing that may be an issue is that there is only one bootstrap <code>&lt;Row&gt;</code>, is that the issue?</p>
  <p>In any case, I've tried the suggestions from stuff like: <a href="https://scotch.io/bar-talk/different-tricks-on-how-to-make-bootstrap-columns-all-the-same-height" rel="nofollow noreferrer">https://scotch.io/bar-talk/different-tricks-on-how-to-make-bootstrap-columns-all-the-same-height</a> and <a href="https://stackoverflow.com/questions/44451246/bootstrap-4-cards-of-same-height-in-columns">Bootstrap 4 Cards of same height in columns</a> and <a href="https://stackoverflow.com/questions/48567158/make-reactstrap-bootstrap4-cards-in-separate-columns-same-height">Make ReactStrap/Bootstrap4 Cards In Separate Columns Same Height</a> but nothing works.</p>
  <p>Here is my actual code:</p>
  <pre><code>export class BooksComponent extends React.PureComponent {
      render() {
          return (
              &lt;Row&gt;
                  this.props.books.map((b, index) =&gt; (
                      &lt;BookComponent
                          key={index}
                          title={b.title}
                          summary={b.summary}
                      /&gt;
                  ))
              &lt;/Row&gt;
          );
      }
  }
  
  export class BookComponent extends React.PureComponent {
      render() {
          return (
              &lt;Col md={4}&gt;
                  &lt;div className=&quot;book-item&quot;&gt;
                      &lt;div className=&quot;book-title&quot;&gt;{this.props.title}&lt;/div&gt;
                      &lt;div className=&quot;book-summary&quot;&gt;{this.props.summary}&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/Col&gt;
          );
      }
  }
  </code></pre>
  <p><strong>SCSS</strong></p>
  <pre><code>.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;
      }
  
      &amp;:hover {
          cursor: pointer;
          box-shadow: 1px 1px 5px gray;
      }
  }
  </code></pre>