CODEWITHSUNDEEP
javascripthtmlbootstrap-4
Amirhossein Maleki
Amirhossein Maleki

Reputation: 3

Add cards in html via javascript

I've added 3 cards through a loop. My problem here is that I want to put these 3 cards together, not below each other. I want them to be ordered horizontally.

arr = [{
    "Name": "Peter",
    "Job": "Programmer"
  },
  {
    "Name": "John",
    "Job": "Programmer"
  },
  {
    "Name": "Kevin",
    "Job": "Scientist"
  },
];

$.each(arr, function(i) {
  var templateString = '<div class="card mb-2 box-shadow">    <img class="card-img-top" src="http://safarset.com/wp-content/uploads/2019/05/IMG-20190423-WA0029.jpeg" alt="Card image cap">      <div class="card-body">  <h5>' + arr[i].Name + '</h5> </p></div> </div>';
  $('#test').append(templateString);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-md-4 col-sm-6 col-xs-12">
  <div id="test"></div>
</div>

Upvotes: 0

Views: 5042

Answers (9)

chaima khammessi
chaima khammessi

Reputation: 1

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container-fluid">
    <div class="row" id="test"></div>
  </div>
  <script>
    arr = [{
        "Name": "Peter",
        "Job": "Programmer"
      },
      {
        "Name": "John",
        "Job": "Programmer"
      },
      {
        "Name": "Kevin",
        "Job": "Scientist"
      },
    ];

    $.each(arr, function(i) {
      var templateString =
        '<div class="col-sm-4 card mb-2 box-shadow">    <img class="card-img-top" src="http://safarset.com/wp-content/uploads/2019/05/IMG-20190423-WA0029.jpeg" alt="Card image cap">      <div class="card-body p-0">  <h5>' +
        arr[i].Name + '</h5> </p></div> </div>';
      $('#test').append(templateString);
    })
  </script>
</body>

</html>

Upvotes: 0

Sai Manoj
Sai Manoj

Reputation: 3859

Simply solution is using proper usage of bootstrap grid. You could have used row class for your <div id="test"> and append <div class="col-4"> for having three cards in row. Below is the working snippet for the same.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>

  <div class="container-fluid">
    <div class="row" id="test"></div>
  </div>
  <script>
    arr = [{
        "Name": "Peter",
        "Job": "Programmer"
      },
      {
        "Name": "John",
        "Job": "Programmer"
      },
      {
        "Name": "Kevin",
        "Job": "Scientist"
      },
    ];

    $.each(arr, function(i) {
      var templateString =
        '<div class="col-sm-4 card mb-2 box-shadow">    <img class="card-img-top" src="http://safarset.com/wp-content/uploads/2019/05/IMG-20190423-WA0029.jpeg" alt="Card image cap">      <div class="card-body p-0">  <h5>' +
        arr[i].Name + '</h5> </p></div> </div>';
      $('#test').append(templateString);
    })
  </script>
</body>

</html>

Upvotes: 0

leonheess
leonheess

Reputation: 21481

You can do that by just adding the class row to your test div: <div id="test" class="row"></div>

Here is the full snippet:

arr = [{
    "Name": "Peter",
    "Job": "Programmer"
  },
  {
    "Name": "John",
    "Job": "Programmer"
  },
  {
    "Name": "Kevin",
    "Job": "Scientist"
  },
];

$.each(arr, function(i) {
  let templateString = '<div class="card mb-2 box-shadow">    <img class="card-img-top" src="http://safarset.com/wp-content/uploads/2019/05/IMG-20190423-WA0029.jpeg" alt="Card image cap">      <div class="card-body">  <h5>' + arr[i].Name + '</h5> </p></div> </div>';
  $('#test').append(templateString);
})
/* not relevant only for visibility within snippet*/
.card {
  width: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-md-4 col-sm-6 col-xs-12">
  <div id="test" class="row"></div>
</div>

Upvotes: 0

Dheeraj Kumar
Dheeraj Kumar

Reputation: 146

Try with below code.
    <script>
       arr = [
         {"Name":"Peter","Job":"Programmer"},
         {"Name":"John","Job":"Programmer"},
         {"Name":"Kevin","Job":"Scientist"},
       ];

       $.each(arr, function(i){
         var templateString = '<div class="col-md-4 col-sm-6 col-xs-12"><div class="card mb-2 box-shadow">    <img class="card-img-top" src="http://safarset.com/wp-content/uploads/2019/05/IMG-20190423-WA0029.jpeg" alt="Card image cap">      <div class="card-body">  <h5>'+arr[i].Name+'</h5> </p></div> </div></div>';
         $('#test').append(templateString);
       })
    </script>    

    <div class="row">
      <div id="test"></div>
    </div>

Upvotes: 0

eveningwater
eveningwater

Reputation: 21

I just modified your code as below:

<div class="col-md-4 col-sm-6 col-xs-12">
        <div id="test" class="row">
        </div>
    </div>
    <script>
        var arr = [
            { "Name": "Peter", "Job": "Programmer" },
            { "Name": "John", "Job": "Programmer" },
            { "Name": "Kevin", "Job": "Scientist" },
        ];

        $.each(arr, function (i) {
            var templateString = '<div class="col-md-4"><div class="card mb-2 box-shadow"><img class="card-img-top" src="http://safarset.com/wp-content/uploads/2019/05/IMG-20190423-WA0029.jpeg" alt="Card image cap"><div class="card-body"><h5>' + arr[i].Name + '</h5></p></div></div></div>';
            $('#test').append(templateString);
        })
    </script>

Maybe that's what you want.

Upvotes: 0

Harsh kurra
Harsh kurra

Reputation: 1216

By default, Div adds children vertically due to default block property of Div, if you want to add items in div in horizontal direction then change the display property to flex with flex-direction should be set to row(it is by default row so you can ignore it). because you are using bootstrap here so you can also use the row class here

 <div id="test" class="row"></div>

or

<div id="test" style="display:flex"></div>

Upvotes: 1

Atul Mathew
Atul Mathew

Reputation: 455

use this css for your div test

#test
{
 position: absolute;
  height: 40px;
  width: 250px;
  background: white;
  display: flex;
 }

a working demo:https://jsfiddle.net/athulmathew/hdwbf5n2/6/

Upvotes: 1

Jitendra G2
Jitendra G2

Reputation: 1206

Try below:

#test
{
  display:flex;
}

Upvotes: 1

Ankit Singh
Ankit Singh

Reputation: 270

You need to add style in div like this:-

<div id="test" style = "display: block"></div>

Upvotes: 0

Related Questions