how to make space between looped cards. i use ajax, jquery and bootstrap

Question

enter image description here

there is no space between the cards. how to add a little bit of space between them?

.done((todos) => {
        todos.forEach(el => {
            console.log(el)
            $("#todo-list").append(`
             <div class="card col-6 col-sm-4" id="todo-${el.id}" style="width: 18rem; flex-wrap: wrap;">
                    <div class="card-body">
                        <h4 class="todo-title">${el.title}</h4>
                        <h6>${el.description}</h6>
                        <p>Due Date: ${el.due_date}</p>
                        <input type="checkbox" id="checkbox" onclick="updateStatus(${el.id})"> Status</input>
                        <a type="button" class="mw-100 btn-close col position-absolute top-0 end-0" aria-label="Close" id="btn-delete-todo" onclick="deleteTodo(${el.id})"></a>
                        </div>
                </div>
            `)
        })

Answer 1

You could use margin, with in the style atrribute or with a bootstrap class.

Using style attribute: style="margin: 1rem;",

.done((todos) => {
  todos.forEach(el => {
  console.log(el)
  $("#todo-list").append(`
    <div class="card col-6 col-sm-4" id="todo-${el.id}" style="width: 18rem; margin: 1rem; flex-wrap: wrap;">
      <div class="card-body">
        <h4 class="todo-title">${el.title}</h4>
        <h6>${el.description}</h6>
        <p>Due Date: ${el.due_date}</p>
        <input type="checkbox" id="checkbox" onclick="updateStatus(${el.id})"> Status</input>
        <a type="button" class="mw-100 btn-close col position-absolute top-0 end-0" aria-label="Close" id="btn-delete-todo" onclick="deleteTodo(${el.id})"></a>
      </div>
    </div>
  `)
})

Using bootstrap class: class="m-4",

.done((todos) => {
  todos.forEach(el => {
  console.log(el)
  $("#todo-list").append(`
    <div class="card col-6 col-sm-4 m-4" id="todo-${el.id}" style="width: 18rem; flex-wrap: wrap;">
      <div class="card-body">
        <h4 class="todo-title">${el.title}</h4>
        <h6>${el.description}</h6>
        <p>Due Date: ${el.due_date}</p>
        <input type="checkbox" id="checkbox" onclick="updateStatus(${el.id})"> Status</input>
        <a type="button" class="mw-100 btn-close col position-absolute top-0 end-0" aria-label="Close" id="btn-delete-todo" onclick="deleteTodo(${el.id})"></a>
      </div>
    </div>
  `)
})

Answer 2

You can try adding this line of code into where you declare the style of the card in where you append the card into your #todo-list.

It would be something like this:

<div class="card col-6 col-sm-4" id="todo-${el.id}" style="width: 18rem;margin-right: .5rem; flex-wrap: wrap;">

Alternatively, you can set a margin-right or margin-left with the value that you actually need to your class card. Moreover, you could even use the default classes for margins if you have Bootstrap 3. For small, medium and large devices, let's say you can do this:

  <div class="card col-6 col-sm-4 mr-1 mr-sm-2 mr-md-2 mr-lg-1" id="todo-${el.id}" style="width: 18rem; flex-wrap: wrap;">

I hope my info on the matter can help you.