Search code examples
htmlcssbootstrap-4rowspacing

how to give space between columns which is one above the other in bootstrap

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>

enter image description here

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

Solution

  • 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>