I've been struggling to properly stack items in Bootstrap layout. Using containers and rows to stack the items works well until a certain breakpoint is reached, after which the alignment is off. Despite searching through numerous StackOverflow questions related to cards and text, I couldn't find a similar problem.
Below is the design that works almost correctly before the 990px breakpoint (may need to add negative padding for proper alignment):
https://i.sstatic.net/SudaD.png
Once the breakpoint is crossed, the layout looks like this:
https://i.sstatic.net/ifLY5.png
Even on the mobile version, where there's enough space, the design is completely wrong:
https://i.sstatic.net/jdTgR.png
My code is in react/nextjs, so feel free to ignore the className if you're not familiar with it.
<div className="container">
<div className="card-deck">
{/* CARD START */}
<div className="card mb-4">
<img
className="card-img-top img-fluid"
src="//placehold.it/500x280"
alt="Card image cap"
/>
<div className="card-body">
<h4 className="card-title">Test information</h4>
<div className="fee-stats">
<div className="container">
<div className="row">
<div className="col-sm">
<p className="card-text">
TAKER
<br />
0.05%
</p>
</div>
<div className="col-sm">
<p className="card-text">
MAKER <br /> 0.05%
</p>
</div>
<div className="col-sm">
<p className="card-text">
WITHDRAWAL
<br /> 0.0005
<span className="bitcoin-icon">₿</span>{" "}
</p>
</div>
</div>
</div>
</div>
</div>
<div className="card-footer border-0 rounded-bottom">
<small className="text-muted">Intermediate</small>
</div>
</div>
CSS:
.card-style {
margin: auto;
width: 80%;
padding: 10px;
}
.card-img-top {
margin: auto;
width: 30%;
padding-top: 20px;
}
.card-title {
text-align: center;
}
.card-footer {
background-color: #9effaf;
}
.rounded {
border-radius: 0.6rem !important;
}
.rounded-bottom {
border-bottom-left-radius: 0.6rem !important;
border-bottom-right-radius: 0.6rem !important;
}
.card-text {
text-align: center;
font-size: 65%;
}