title: Align three cards horizontally in a single row dynamically
body: <p>I am trying to align the card one next to other. I've done the below coding not sure why am I not able display it one next to other. </p>
  
  <p>Here I am trying to call REST API and the result I get from REST API is a list I need to iterate the result through for loop and then display the fetched data in card form. Please someone guide me through this, thank you..</p>
  
  <p><strong>client.js</strong></p>
  
  <pre><code> $(document).ready(function() {   
          $.ajax({
             url: "REST API CALL",
             success: function(data){        
              data.forEach(function(a) { 
                  var html = `      
                  &lt;div class="row"&gt;
                     &lt;div class=""&gt;
                      &lt;div class="card" style="width: 20rem; text-align:center;display:inline-block;"&gt;
                      &lt;img class="imagee" src="im.png" alt="image" height="200" width="200" style="border-radius:.60rem;"&gt;
                       &lt;div class="card-body"&gt;
                       ${a[0]}|${a[4]}&lt;br&gt;
                       ${a[7]}&lt;br&gt;
                       &lt;i class="fa fa-car"&gt;&lt;/i&gt;${a[9]}
                    &lt;p class="card-text"&gt;&lt;/p&gt;
             &lt;/div&gt;
      &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;`
  
                  $('#msgs').append(`&lt;div&gt;${html}&lt;/div&gt;`);
                });
               }
          }).then(function(data) {      
          });
          });
  </code></pre>