Personal Portfolio Webpage with JavaScript and bootstrap

Tell us what’s happening:
I decided to change my personal portfolio webpage to use JavaScript to display the projects.

My Projects - html-css-only

My Projects - js version

But the js version didn’t work correctly. First row of the projects shrink in both left and right side.
At the beginning, I thought it maybe related to the image. But after I changed all the image to the same size, the problem still there.

Help needed. Thanks.

Your code so far

for(var i=0; i<= projectDetails.length -1;i++){
    title = projectDetails[i].name;
    description = projectDetails[i].description;
    thumbnail = projectDetails[i].thumbnail;
    hyperlink = projectDetails[i].hyperlink;
    if(i%3==0){
      projectsHTMLList += '<div class="row">';      
    }
    projectHTML = '';
    projectHTML += '<div class="col-xs-12 col-sm-4" >';
    projectHTML += '<div class="project-class" >';
    projectHTML = projectHTML + '<a href="' +  hyperlink +'" target="_blank">';
    projectHTML += '<img class= "project-image img-responsive" src="' + thumbnail + '">';
    projectHTML += '<div class= "project-text">';
    projectHTML += '<div class="text-center  project-title" >' + title +'</div>';
    projectHTML += '<p>' + description + '</p>';  
    projectHTML += '</div></a></div></div>';  
    console.log(projectHTML);

    projectsHTMLList += projectHTML;  
  }


  $("#js-projects").html(projectsHTMLList);
}

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36.

Link to the challenge:
https://www.freecodecamp.org/challenges/add-placeholder-text-to-a-text-field

Thanks. I fixed my code. And thank you for your suggestion on Template Literals, I will look into it.

I have updated my code again. I feel that I may not need <div class="row">${projectHTML}</div>; at all.
Because I have set up <div class="col-xs-12 col-sm-4">...
So it will either be three in a row, or one in a row.
How do you think of that?

Also, from your code, I learned Template Literals and Destructuring assignment.

Here is the one I used template literals and destructuring assignment.

But I found that both of that won’t support internet explorer. Do you have any suggestion?

Thanks again for your time and your advise. It is very valuable to me.