Dynamically create Bootstrap grid

I'm trying to dynamically generate bootstrap columns using a javascript function. The purpose is to make them appear as different columns in the same row.

It currently looks like this:

I call this function on window.onload() with the div id:

// Update the bootstrap grid once the tasks are added
function updateTaskContainerHead(containerId){
    let containerHead = document.getElementById(containerId);
    // Take the row headings and make an HTML container out of them
    let tblRowHeadings = ['Task Name','Assigned To','Priority','Due Date',''];
    let tblHeadRow = document.createElement("div");
    tblHeadRow.classname="row";
    for (let heading of tblRowHeadings){
        let tblHeadCell = document.createElement("div");
        tblHeadCell.className="col";
        let cellText = document.createTextNode(heading);
        tblHeadCell.appendChild(cellText);
        tblHeadRow.appendChild(tblHeadCell);
    }
    containerHead.appendChild(tblHeadRow);
}

HTML components are just:

<lead>Completed Tasks</lead>
<div class="container" id="ongoingTasksContainer">

What do you think might be the problem?