Bootstrap 5 How to add a space between these two cards?-CodePudding

I'm trying to create a space between two cards, but I can't seem to figure it out. This is what I have right now:

<div >
            <div  id="recentDiv">
                <div >
                    <img  src="..." alt="Card image">
                    <div >
                      <h5 >Card title</h5>
                      <p >This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                      <p >Last updated 3 mins ago</p>
                    </div>
                  </div>
                  <div >
                    <img  src="..." alt="Card image">
                    <div >
                      <h5 >Card title</h5>
                      <p >This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                      <p >Last updated 3 mins ago</p>
                    </div>
                  </div>
            </div>
        </div>

CodePudding user response：

How about using a CSS grid wihthin Bootstrap. Apply g-grid gap-3 to the parent div. With gap-{x} you can decide how big the gaps will be.

On the children instead of col-6 use g-col-6.

Note: I've used some dummy images to illustrate what it would look like.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div >
  <div  id="recentDiv">
    <div >
      <img  src="https://dummyimage.com/400x200/000/f0f" alt="Card image">
      <div >
        <h5 >Card title</h5>
        <p >This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p >Last updated 3 mins ago</p>
      </div>
    </div>
    <div >
      <img  src="https://dummyimage.com/400x200/000/f0f" alt="Card image">
      <div >
        <h5 >Card title</h5>
        <p >This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p >Last updated 3 mins ago</p>
      </div>
    </div>
  </div>
</div>

You might need to do some adjustments so it looks good with your images but the general approach should work.

CodePudding user response：

The Bootstrap documentation references this. Basically, add .gx-{n} to your .row element, where {n} is 0-5. So gx-1, gx-2, etc.