I have created a website using Bootstrap and PHP to display data from 18 categories in columns. The code for listing the categories in a single row is shown below:
<div class="row">
<?php foreach($categories as $val){?>
<div class="col-xl-2 col-sm-6">
<div class="card bg-card-light bg-primary-card bg-white">
<div class="card-body">
<div class="cat-item text-center">
<a href="<?= base_url();?>categories?category=<?= $val->category_name?>"></a>
<div class="cat-icon bg-primary-transparent brround text-primary">
<img src="<?= base_url()?>uploads/categoryicon/<?= $val->category_icon?>">
</div>
<div class="cat-desc">
<h5 class="mb-2">
<?= $val->category_name?>
</h5>
</div>
</div>
</div>
</div>
</div>
<?php }?>
</div>https://i.sstatic.net/IQDjd.png
In the provided image, you can see that the first and second column groups are very close together. Can someone please advise me on how to add spacing between them? Thank you in advance.