I am currently utilizing reactstrap to configure cards for a particular view. However, I am facing an issue where the last two cards do not have images in the header and I need them to be stacked. My attempted solution was to add a <Col></Col>, but this resulted in messing up the padding. Is there a more effective way to achieve this without compromising the design? It's important to note that Reactstrap is built on BootStrap 4.
Here is a visual representation of my current setup:
Below is the code snippet for all five cards:
<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>