Question 258959 in Html Question posted in
Some basic documentation can be found here.

Html – Bootstrap Card extending outside parent element

I am trying to recreate Bootstrap’s Cards example in my project. But I noticed that each Card’s top margin extends outside the parent element, a border div.

Bootstrap docs on Card usage here, picture below for visual reference:

enter image description here

I’ve copied the code but my Cards get generated as follows:

enter image description here

I want that "gap" between the border & the Cards but in my code example, the border is hugging the Cards. I know the CSS styling on the Cards will make each Card have a top margin, but I can’t seem to get the border div to fit that margin.

I have tried implementing a margin & padding on the parent element but I still get the same results.

Anyone knows how I can fix this?

Codepen attached here: link.

<h1>Your Cards</h1>

<div class="border border-1">
  <div class="row row-cols-1 row-cols-md-3 g-4">
    <div class="col">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
          <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        </div>
      </div>
    </div>
  </div>
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    the problem was trying to use Bootstrap's border class to wrap the Cards & adding padding or margin to this class. I'm not sure why the border class doesn't work.

    what i did instead was to create my own custom CSS class .card-container to wrap the Cards & add the margin i wanted, code below:

    <div class="card-container>
  ...
</div>

    .card-container {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 10px;
}

  2. 0

    Experiment with margin and padding settings on both the parent element and the individual Cards. You may need to adjust these values to control the spacing and alignment of your Cards within the parent container.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search