title: How to auto size rows in react-bootstrap?
body: <p>I am trying to make cards in group of 3 in each row using react-bootstrap. I made it, however if one cards height is longer, space occurs and makes it ugly for whole row. See pics(I basically don't want the space that I circled. How can I achieve this?). Photo:
  <a href="https://i.stack.imgur.com/oQU9v.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oQU9v.png" alt="enter image description here" /></a></p>
  <p>Code:
  My card component:</p>
  <pre><code>import React from 'react'
  import { Card, CardGroup, Col, Container, Row, Tab, ListGroup } from 'react-bootstrap'
  import { Link } from 'react-router-dom';
  
  function SoruKart(props) {
      return (&lt;Col&gt;
          &lt;Card style={{ margin: 10 }}&gt;
              &lt;Card.Body&gt;
                  &lt;Card.Title&gt;{props.title}&lt;/Card.Title&gt;
                  &lt;Card.Text&gt;
                      {props.description}
                  &lt;/Card.Text&gt;
              &lt;/Card.Body&gt;
              &lt;Card.Footer&gt;
                  &lt;small className=&quot;text-muted&quot;&gt;{props.type}&lt;/small&gt;
              &lt;/Card.Footer&gt;
          &lt;/Card&gt;
      &lt;/Col&gt;
      )
  }
  
  export default SoruKart
  </code></pre>
  <p>and here is where I use the component:</p>
  <pre><code>&lt;Row&gt;
            &lt;SoruKart title=&quot;title&quot; description=&quot;descriptResponseForm component actually exists. The path seems to be correct. How should I fix it? Why is import error occuring?ResponseForm component actually exists. The path seems to be correct. How should I fix it? Why is import error occuring?ResponseForm component actually exists. The path seems to be correct. How should I fix it? Why is import error occuring?ion&quot; type=&quot;Kolay&quot; /&gt;
            &lt;SoruKart title=&quot;title&quot; description=&quot;description&quot; type=&quot;Kolay&quot; /&gt;
            &lt;SoruKart title=&quot;title&quot; description=&quot;description&quot; type=&quot;Kolay&quot; /&gt;
          &lt;/Row&gt;
          &lt;Row&gt;
            &lt;SoruKart title=&quot;title&quot; description=&quot;description&quot; type=&quot;Kolay&quot; /&gt;
            &lt;SoruKart title=&quot;title&quot; description=&quot;description&quot; type=&quot;Kolay&quot; /&gt;
            &lt;SoruKart title=&quot;title&quot; description=&quot;description&quot; type=&quot;Kolay&quot; /&gt;
          &lt;/Row&gt;
          &lt;Row&gt;
            &lt;SoruKart title=&quot;title&quot; description=&quot;description&quot; type=&quot;Kolay&quot; /&gt;
            &lt;SoruKart title=&quot;title&quot; description=&quot;description&quot; type=&quot;Kolay&quot; /&gt;
            &lt;SoruKart title=&quot;title&quot; description=&quot;description&quot; type=&quot;Kolay&quot; /&gt;
          &lt;/Row&gt;
  </code></pre>