I can’t get this right when box number 4 to 5 can’t align with the top one. because of this I can’t add more boxes, any clue?
<div class="container col-md-12">
<div class="row">
<div class="col-md-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Quick Links</h5>
<ul class="list-unstyled">
<li><a href="#" class="card-link"><i class="fas fa-home"></i> Home</a></li>
<li><a href="#" class="card-link"><i class="fas fa-user"></i> Profile</a></li>
<li><a href="#" class="card-link"><i class="fas fa-cog"></i> Settings</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-6">
<div class="card position-relative">
<div class="advertisement-label">Advertisement</div>
<div class="card-body">
<img src="https://s3.amazonaws.com/virginia.webrand.com/virginia/6Of7tf0qppA/3fc0182dc30c39f4e01af5fda35a6bb6/1754/1689193338.png" class="img-fluid" alt="Advertisement">
</div>
</div>
</div>
<div class="col-sm-3" style="max-height: 170px;height: 160px;">
<div class="category-box">
<div class="seo-box">
<img src="https://via.placeholder.com/150" class="img-fluid" alt="Box 1">
<a href="#" class="card-link"><h6 class="card-subtitle mt-2">Box 1</h6></a>
</div>
</div>
</div>
<div class="col-sm-3" style="max-height: 170px;height: 160px;">
<div class="category-box">
<div class="seo-box">
<img src="https://via.placeholder.com/150" class="img-fluid" alt="Box 2">
<a href="#" class="card-link"><h6 class="card-subtitle mt-2">Box 2</h6></a>
</div>
</div>
</div>
<div class="col-sm-3" style="max-height: 170px;height: 160px;">
<div class="category-box">
<div class="seo-box">
<img src="https://via.placeholder.com/150" class="img-fluid" alt="Box 3">
<a href="#" class="card-link"><h6 class="card-subtitle mt-2">Box 3</h6></a>
</div>
</div>
</div>
<div class="col-sm-3" style="max-height: 170px;height: 160px;">
<div class="category-box">
<div class="seo-box">
<img src="https://via.placeholder.com/150" class="img-fluid" alt="Box 3">
<a href="#" class="card-link"><h6 class="card-subtitle mt-2">Box 3</h6></a>
</div>
</div>
</div>
<!-- Add more boxes here -->
</div>
</div>
</div>
</div>
https://dca-calculators.com/testing.php
I can’t get this right when box number 4 to 5 can’t align with the top one. because of this I can’t add more boxes, any clue?
New contributor
Suwandi Chen is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.