title: Create a loop of bootstrap 4 card with given array?
body: <p>I want to create the HTML like this picture. This css using bootstrap 4.3.1 and there are some card with embedded picture for each card</p>
  <p><a href="https://i.stack.imgur.com/Ms8wU.png" rel="nofollow noreferrer">enter image description here</a></p>
  <p>with the source code :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;title&gt;DOM Practice&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
      &lt;script defer src="https://use.fontawesome.com/releases/v5.8.1/js/all.js" integrity="sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;nav class="navbar navbar-light bg-light"&gt;
              &lt;a class="navbar-brand"&gt;Mini Ecommerce&lt;/a&gt;
              &lt;form class="form-inline" id="formItem" action="#"&gt;
                  &lt;input class="form-control mr-sm-2" type="search" placeholder="Search" id="keyword" aria-label="Search"&gt;
                  &lt;button class="btn btn-outline-success my-2 my-sm-0" type="submit" id="searchItem"&gt;Search&lt;/button&gt;
              &lt;/form&gt;
              &lt;button class="btn btn-primary" id="cart"&gt;&lt;i class="fas fa-shopping-cart"&gt;&lt;/i&gt;(0)&lt;/button&gt;
          &lt;/nav&gt;
          &lt;div class="row" id="shop"&gt;
              &lt;div id="keyBoard" class="col-md-4 mt-2"&gt;
                  &lt;div class="card" style="width: 18rem;"&gt;
                      &lt;img src="msi.jpg" class="card-img-top img-fluid" alt="keyboard"&gt;
                      &lt;div class="card-body"&gt;
                          &lt;h5 class="card-title" id="itemName"&gt;MSI&lt;/h5&gt;
                          &lt;p class="card-text" id="itemDesc"&gt;MSI Keyboard&lt;/p&gt;
                          &lt;p class="card-text"&gt;Rp 300.000,00&lt;/p&gt;
                          &lt;a href="#" class="btn btn-primary" id="addCart"&gt;Add to cart&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="keyBoard" class="col-md-4 mt-2"&gt;
                  &lt;div class="card" style="width: 18rem;"&gt;
                      &lt;img src="logitek.jpg" class="card-img-top img-fluid" alt="keyboard"&gt;
                      &lt;div class="card-body"&gt;
                          &lt;h5 class="card-title" id="itemName"&gt;Logitek&lt;/h5&gt;
                          &lt;p class="card-text" id="itemDesc"&gt;Logitek Keyboard&lt;/p&gt;
                          &lt;p class="card-text"&gt;Rp 60.000,00&lt;/p&gt;
                          &lt;a href="#" class="btn btn-primary" id="addCart"&gt;Add to cart&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="moUse" class="col-md-4 mt-2"&gt;
                  &lt;div class="card" style="width: 18rem;"&gt;
                      &lt;img src="genius.jpeg" class="card-img-top img-fluid" alt="mouse"&gt;
                      &lt;div class="card-body"&gt;
                          &lt;h5 class="card-title" id="itemName"&gt;Genius&lt;/h5&gt;
                          &lt;p class="card-text" id="itemDesc"&gt;Genius Mouse&lt;/p&gt;
                          &lt;p class="card-text"&gt;Rp 50.000,00&lt;/p&gt;
                          &lt;a href="#" class="btn btn-primary" id="addCart"&gt;TAdd to cart&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="moUse" class="col-md-4 mt-2"&gt;
                  &lt;div class="card" style="width: 18rem;"&gt;
                      &lt;img src="jerry.jpg" class="card-img-top img-fluid" alt="mouse"&gt;
                      &lt;div class="card-body"&gt;
                          &lt;h5 class="card-title" id="itemName"&gt;Jerry&lt;/h5&gt;
                          &lt;p class="card-text" id="itemDesc"&gt;Jerry Mouse&lt;/p&gt;
                          &lt;p class="card-text"&gt;Rp 30.000,00&lt;/p&gt;
                          &lt;a href="#" class="btn btn-primary" id="addCart"&gt;Add to cart&lt;/a&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>My questions : how to display that cards (bootstrap card) with a loop of javascript than input manually, if I'm add this array to the script :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>var items = [
              [ 'Logitek', 'Rp 60.000,00', 'Logitek Keyboard', 'logitek.jpeg'],
              [ 'MSI', 'Rp 300.000,00', 'MSI Keyboard', 'msi.jpeg'],
              [ 'Genius', 'Rp 50.000,00', 'Genius Mouse', 'genius.jpeg'],
              [ 'Jerry', 'Rp 30.000,00', 'Jerry Mouse', 'jerry.jpeg']
          ]</code></pre>
  </div>
  </div>
  </p>