如何在引导程序中一个在另一个之上的列之间留出空间

Question

i have a website done in bootstrap, in which I am listing some data using PHP, so I have 18 categories, 18 categories are listed in columns in a single row, whose code is like 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"> <!-- <i class="fa fa-hospital-o"></i> --> <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>

as you can see in this pic, the 1st column group and second column group are very close to each other, can anyone tell me how to give spacing between them. thanks in advance

Answer 1

You can add padding to the bottom element.

I've added a snippet using your code and used an example image and text.

This is the only css added:

.mb-2 {
padding-top: 30px;
background-color: black;
color: white;
}

Additionally, if you want to target the entire bottom div you can use margin on the div class like this:

.cat-desc {
margin-top: 30px;
background-color: black;
color: white;
}

 .mb-2 { padding-top: 30px; background-color: black; color: white; }

 <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"> <!-- <i class="fa fa-hospital-o"></i> --> <img src="https://cdn.pixabay.com/photo/2020/08/25/18/28/workplace-5517744__340.jpg"> </div> <div class="cat-desc"> <h5 class="mb-2"> Bottom </h5> </div> </div> </div> </div> </div> <?php }?> </div>