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

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  id="todo-${el.id}" style="width: 18rem; flex-wrap: wrap;">
                    <div >
                        <h4 >${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"  aria-label="Close" id="btn-delete-todo" onclick="deleteTodo(${el.id})"></a>
                        </div>
                </div>
            `)
        })

CodePudding user response：

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  id="todo-${el.id}" style="width: 18rem; margin: 1rem; flex-wrap: wrap;">
      <div >
        <h4 >${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"  aria-label="Close" id="btn-delete-todo" onclick="deleteTodo(${el.id})"></a>
      </div>
    </div>
  `)
})

Using bootstrap class: ,

.done((todos) => {
  todos.forEach(el => {
  console.log(el)
  $("#todo-list").append(`
    <div  id="todo-${el.id}" style="width: 18rem; flex-wrap: wrap;">
      <div >
        <h4 >${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"  aria-label="Close" id="btn-delete-todo" onclick="deleteTodo(${el.id})"></a>
      </div>
    </div>
  `)
})

CodePudding user response：

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  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  id="todo-${el.id}" style="width: 18rem; flex-wrap: wrap;">

I hope my info on the matter can help you.