Bootstrap Выровнять по горизонтали данные из API

    /*
    container.innerText = "It's working!\n\n";
    container.innerText += 'Found sample products:\n';
    products.forEach(product => (container.innerText += `- ${product.title}\n`));
    */
    var products = [
  {
    "imageUrl": "http://lorempixel.com/g/400/200",
    "title": "CANDECOR"
  },
  {
    "imageUrl": "http://lorempixel.com/g/400/200",
    "title": "ZOLAREX"
  },
  {
    "imageUrl": "http://lorempixel.com/g/400/200",
    "title": "HATOLOGY"
  },
  {
    "imageUrl": "http://lorempixel.com/g/400/200",
    "title": "EGYPTO"
  },
  {
    "imageUrl": "http://lorempixel.com/g/400/200",
    "title": "BULLZONE"
  },
  {
    "imageUrl": "http://lorempixel.com/g/400/200",
    "title": "NIKUDA"
  }
];
    var countFirstThree = true;
    var isCardSet = true;
    var setCount = 1;
    for (var i = 1; i < products.length; i++) {
      if (isCardSet) {
        $('.carousel-inner').append(insertCarouselItem(countFirstThree, setCount));
        isCardSet = false;
      }
      if (i % 3 == 0) {
        $('#set-' + setCount).append(insertCards(products[i - 1].id, products[i - 1].imageUrl, products[i - 1].title));
        $('#set-' + setCount).append('</div>');
        countFirstThree = false;
        isCardSet = true;
        setCount++;
      } else {
        $('#set-' + setCount).append(insertCards(products[i - 1].id, products[i - 1].imageUrl, products[i - 1].title));
      }
    }


function getUrlImage(url) {
  const host = 'http://localhost:8181';
  return "http://lorempixel.com/g/400/200";
}

function insertCarouselItem(isActive, set) {
  var active = isActive ? ' active' : '';
  var result = `<div id = "set-${set}" class = "carousel-item${active}">`;

  return result;
}

function insertCards(id, imageUrl, title) {
  var result = `
  <div id = "${id}" class = "card" style = "width: 300px;">
    <img class = "card-img-top" src = "${getUrlImage(imageUrl)}">
    <div class = "card-body">
      <h3 class = "card-title">${title}</h3>
      <button class = "btn btn-primary">Add to cart</button>
    </div>
  </div>`;
  return result;
}

  <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">

  <div class = "container-fluid">
    <div id = "productCarousel" class = "carousel slide" data-ride = "carousel" data-interval = "false">
      <div class = "carousel-inner">

      </div>
      <a class = "carousel-control-prev" href = "#productCarousel" role = "button" data-slide = "prev">
        <span class = "carousel-control-prev-icon" aria-hidden = "true"></span>
        <span class = "sr-only">Previous</span>
      </a>
      <a class = "carousel-control-next" href = "#productCarousel" role = "button" data-slide = "next">
        <span class = "carousel-control-next-icon" aria-hidden = "true"></span>
        <span class = "sr-only">Next</span>
      </a>
    </div>
  </div>

  <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin = "anonymous"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
    integrity = "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
    crossorigin = "anonymous"></script>
  <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
    integrity = "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
    crossorigin = "anonymous"></script>