I am trying to figure out how to do the margins either in CSS or Bootstrap so that there is the same exact spacing/margins between each card.

Here is my code:

<div >
  <div >
    <?php foreach ($properties as $property):?>
      <div >
        <img src="<?php echo $property->logo; ?>"  /><br />
        <h4><?php echo $property->title; ?></h4><br />
        <a href="<?php echo $property->registration_url; ?>" >View Event</a>
      </div>
    <?php endforeach;?>
  </div>
</div>

CodePudding user response：

wrap your card between the col like this following code

<div >
  <div >
    <?php foreach ($properties as $property):?>
      <div class=“col-md-4 text-center”>
       <div class=“card py-4 px-3”>
        <img src="<?php echo $property->logo; ?>"  /><br />
        <h4><?php echo $property->title; ?></h4><br />
        <a href="<?php echo $property->registration_url; ?>" >View Event</a>
         </div>
      </div>
    <?php endforeach;?>
  </div>
</div>

CodePudding user response：

You can just add gutter class alongside with row class so your code will look something like this:

<div >

Also, you have to wrap each card inside a column as I did in the code.

Note: Always wrap your content inside a parent column

1. gy class will add vertical gutter
2. gx class will add horizontal gutter
3. g class will add gutter for both vertical and horizontal axis

Code Example

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div >
  <div >
    <div >
      <div >
        <h4>Title goes here</h4>
        <a href="#" >View Event</a>
      </div>
    </div>
    <div >
        <div >
          <h4>Title goes here</h4>
          <a href="#" >View Event</a>
        </div>
      </div>
    <div >
        <div >
          <h4>Title goes here</h4>
          <a href="#" >View Event</a>
        </div>
      </div>
    <div >
        <div >
          <h4>Title goes here</h4>
          <a href="#" >View Event</a>
        </div>
      </div>
    <div >
        <div >
          <h4>Title goes here</h4>
          <a href="#" >View Event</a>
        </div>
      </div>
  </div>
</div>

Bootstrap gutter docs: Gutter docs