title: How to show 4 items per row in HTML
body: <p>I have a few items that need to be shown as 4 items per row like in Amazon. Below image is of Amazon.</p>
  
  <p>This is what I want:</p>
  
  <p><a href="https://i.stack.imgur.com/sPapm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sPapm.png" alt="enter image description here"></a></p>
  
  <p>This is what I get:</p>
  
  <p><a href="https://i.stack.imgur.com/BuFxZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BuFxZ.png" alt="enter image description here"></a></p>
  
  <p><strong>Code:</strong></p>
  
  <pre><code>function loadBooksTable(){
  axios.get(baseUrlLocal + '/book/info')
  .then(function (response) {
      console.log(response)
      console.log(response.data)
      response.data.forEach(request =&gt; {
          i=i+1;
  
          html = '&lt;tr&gt;'
          html +='&lt;td align="center"&gt;'+request.ISBN+'&lt;/br&gt;' ;
          html +=request.BookName+'&lt;/br&gt;' ;
          html +=request.Author+'&lt;/br&gt;' ;
  
          html +=request.PricePerDay + '&lt;/br&gt;';
          html +='&lt;img id="thumb" style="width:80px;height:80px" src="./images/'+ request.ISBN +'.png"/&gt;' + '&lt;/br&gt;';
          html +=isRented(request.Rented) + '&lt;/br&gt;';
         '&lt;/td&gt;' ;
          html +='&lt;/tr&gt;';
         $('#view-all-books tbody').append(html);
      });
  })
  .catch(function (error) {
      // handle error
      console.log(error);
  });
  }
  </code></pre>