title: Stacking Bootstrap 4 cards in card deck
body: <p>I am using reactstrap to setup cards for one of my views. The last 2 cards have no images in the header and the need is to have them stacked. What I have done, but doesn't look to good is add a <code>&lt;Col&gt;&lt;/Col&gt;</code> in there, but that messes with the padding. Is there a way I canb simply do this and have it look correctly? Reactstrap is based on BootStrap 4.</p>
  
  <p>Here is what mine looks like:</p>
  
  <p><a href="https://i.stack.imgur.com/QK7cZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QK7cZ.png" alt="enter image description here"></a></p>
  
  <p>My code for all 5 cards is:</p>
  
  <pre><code>&lt;Container fluid="true"&gt;
    &lt;CardDeck&gt;
      &lt;Card&gt;
        &lt;CardImg className="cardImg" top width="25%" src={custImersion} alt="support immersion program" /&gt;
        &lt;CardHeader tag="h3"&gt;Connect with Customers&lt;/CardHeader&gt;
        &lt;CardBody&gt;
          &lt;CardTitle&gt;&lt;NavLink to="/ConnCust"&gt;Moneyball&lt;/NavLink&gt;&lt;/CardTitle&gt;
          &lt;CardText&gt;Learn from your customers.&lt;/CardText&gt;
          &lt;CardTitle&gt;Immerse&lt;/CardTitle&gt;
          &lt;CardText&gt;Go onsite with customers.&lt;/CardText&gt;
          &lt;Button color="primary"&gt;&lt;NavLink to="/supportImmersion"&gt;more&lt;/NavLink&gt;&lt;/Button&gt;
        &lt;/CardBody&gt;
      &lt;/Card&gt;
      &lt;Card&gt;
        &lt;CardImg className="cardImg" top width="25%" src={suppImmersion} alt="customer immersion program" /&gt;
        &lt;CardHeader tag="h3"&gt;Connect with Support&lt;/CardHeader&gt;
        &lt;CardBody&gt;
        &lt;CardTitle&gt;Support Immersion&lt;/CardTitle&gt;
          &lt;CardText&gt;Embed onsite with your CSS team.&lt;/CardText&gt;
        &lt;CardTitle&gt;Support Queue Enablement&lt;/CardTitle&gt;
          &lt;CardText&gt;Remotely empower your CSS team.&lt;/CardText&gt;
          &lt;Button color="primary"&gt;&lt;NavLink to="/customerImmersion"&gt;more&lt;/NavLink&gt;&lt;/Button&gt;
        &lt;/CardBody&gt;
      &lt;/Card&gt;
      &lt;Card&gt;
        &lt;CardImg className="cardImg" top width="25%" src={Mb} alt="moneyball program" /&gt;
        &lt;CardHeader tag="h3"&gt;Get Training&lt;/CardHeader&gt;
        &lt;CardBody&gt;
          &lt;CardTitle&gt;Online Training&lt;/CardTitle&gt;
          &lt;CardText&gt;Moneyball is hypothesis-driven learning from customer data through rapid experimentations. Each step is applied iteratively through the 4 phases of problem discovery, solution design, service delivery, and driving business.&lt;/CardText&gt;
          &lt;CardTitle&gt;Classroom&lt;/CardTitle&gt;
          &lt;CardText&gt;There are two ways to learn on the Moneyball methodology – online course or an immersive classroom training. Click to learn more.&lt;/CardText&gt;
          &lt;Button color="primary"&gt;&lt;NavLink to="/learnMB"&gt;more&lt;/NavLink&gt;&lt;/Button&gt;
        &lt;/CardBody&gt;
      &lt;/Card&gt;
      &lt;Col&gt;
        &lt;Card&gt;
          &lt;CardHeader tag="h3"&gt;Tools &amp; Resources&lt;/CardHeader&gt;
          &lt;CardBody&gt;
            &lt;CardTitle&gt;Moneyball&lt;/CardTitle&gt;
            &lt;CardText&gt;
              &lt;li&gt;Resource 1&lt;/li&gt;
              &lt;li&gt;Resource 2&lt;/li&gt;
              &lt;li&gt;Resource 3&lt;/li&gt;
            &lt;/CardText&gt;
            &lt;Button color="primary"&gt;&lt;NavLink to="/learnMB"&gt;more&lt;/NavLink&gt;&lt;/Button&gt;
          &lt;/CardBody&gt;
        &lt;/Card&gt;
        &lt;Card&gt;
        &lt;CardHeader tag="h3"&gt;Events &amp; Links&lt;/CardHeader&gt;
          &lt;CardBody&gt;
            &lt;CardTitle&gt;Moneyball&lt;/CardTitle&gt;
            &lt;CardText&gt;
              &lt;ul&gt;
                &lt;li&gt;Events 1&lt;/li&gt;
                &lt;li&gt;Event 2&lt;/li&gt;
                &lt;li&gt;Event 3&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/CardText&gt;
            &lt;Button color="primary"&gt;&lt;NavLink to="/learnMB"&gt;more&lt;/NavLink&gt;&lt;/Button&gt;
          &lt;/CardBody&gt;
        &lt;/Card&gt;
      &lt;/Col&gt;
    &lt;/CardDeck&gt;
  &lt;/Container&gt;
  </code></pre>