Stacking Bootstrap 4 cards in card deck

Question

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 <Col></Col> 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.

Here is what mine looks like:

My code for all 5 cards is:

<Container fluid="true">
  <CardDeck>
    <Card>
      <CardImg className="cardImg" top width="25%" src={custImersion} alt="support immersion program" />
      <CardHeader tag="h3">Connect with Customers</CardHeader>
      <CardBody>
        <CardTitle><NavLink to="/ConnCust">Moneyball</NavLink></CardTitle>
        <CardText>Learn from your customers.</CardText>
        <CardTitle>Immerse</CardTitle>
        <CardText>Go onsite with customers.</CardText>
        <Button color="primary"><NavLink to="/supportImmersion">more</NavLink></Button>
      </CardBody>
    </Card>
    <Card>
      <CardImg className="cardImg" top width="25%" src={suppImmersion} alt="customer immersion program" />
      <CardHeader tag="h3">Connect with Support</CardHeader>
      <CardBody>
      <CardTitle>Support Immersion</CardTitle>
        <CardText>Embed onsite with your CSS team.</CardText>
      <CardTitle>Support Queue Enablement</CardTitle>
        <CardText>Remotely empower your CSS team.</CardText>
        <Button color="primary"><NavLink to="/customerImmersion">more</NavLink></Button>
      </CardBody>
    </Card>
    <Card>
      <CardImg className="cardImg" top width="25%" src={Mb} alt="moneyball program" />
      <CardHeader tag="h3">Get Training</CardHeader>
      <CardBody>
        <CardTitle>Online Training</CardTitle>
        <CardText>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.</CardText>
        <CardTitle>Classroom</CardTitle>
        <CardText>There are two ways to learn on the Moneyball methodology – online course or an immersive classroom training. Click to learn more.</CardText>
        <Button color="primary"><NavLink to="/learnMB">more</NavLink></Button>
      </CardBody>
    </Card>
    <Col>
      <Card>
        <CardHeader tag="h3">Tools & Resources</CardHeader>
        <CardBody>
          <CardTitle>Moneyball</CardTitle>
          <CardText>
            <li>Resource 1</li>
            <li>Resource 2</li>
            <li>Resource 3</li>
          </CardText>
          <Button color="primary"><NavLink to="/learnMB">more</NavLink></Button>
        </CardBody>
      </Card>
      <Card>
      <CardHeader tag="h3">Events & Links</CardHeader>
        <CardBody>
          <CardTitle>Moneyball</CardTitle>
          <CardText>
            <ul>
              <li>Events 1</li>
              <li>Event 2</li>
              <li>Event 3</li>
            </ul>
          </CardText>
          <Button color="primary"><NavLink to="/learnMB">more</NavLink></Button>
        </CardBody>
      </Card>
    </Col>
  </CardDeck>
</Container>

Answer 1

There's really no easy way to stack the card-deck cards in one column. You can use the hack you suggested with to wrap the last 2 cards. Then adjust the padding and position of the cards like this.

<div class="col d-flex flex-column px-0">..</div>

However, I think you would be better off just putting the cards inside the grid...

https://www.codeply.com/go/kR47vMqdHm

<div class="container">
    <div class="row">
        <div class="col-4">
            <div class="card mb-4">
                <img class="card-img-top img-fluid" src="//placehold.it/500x280" alt="Card image cap">
                <div class="card-block">
                    <h4 class="card-title">1 Card title</h4>
                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
        </div>
        <div class="col-4">
            <div class="card mb-4">
                <img class="card-img-top img-fluid" src="//placehold.it/500x380" alt="Card image cap">
                <div class="card-block">
                    <h4 class="card-title">2 Card title</h4>
                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
        </div>
        <div class="col-4">
            <div class="card mb-4">
                <div class="card-block">
                    <h4 class="card-title">3 Card title</h4>
                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
            <div class="card mb-4">
                <div class="card-block">
                    <h4 class="card-title">4 Card title</h4>
                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
        </div>
    </div>
</div>