I am attempting to create cards from an array, but when the “col” divs are created they are taking up the full width of the row instead of their assigned widths as per the class.

Here is the page snippet:

<!-- Start Main Body -->
        <div class="container-fluid home-inner">
          <div class="page-inner" id="cardlist">
            <div class="row">
              <div class="col-md-12">
                <div class="card card-round card50opacity-green">
                  <div class="card-header">
                    <div class="header-image-center">
                      <img class="header-image-center" src="/assets/img/trolenpadda/landscape-logo-1350.png">
                    </div>                    
                    <div class="card-head-row card-tools-still-right">
                      <div class="card-tools">
                      </div>
                    </div>
                  </div>
                  <div class="card-body">
                    <form class="form-group" action="/search-results.html" method="POST">
                          <div class="input-icon">
                            <input
                              type="text"
                              class="form-control"
                              placeholder="Find that card..."
                              name="search-results"
                            />
                            <span class="input-icon-addon">
                              <button type="submit" class="btn-mag-search"><i class="fas fa-search"></i></button>                              
                            </span>
                          </div>
                        </form>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Main Body -->

And here is the JS code creating the cols;

let content = '<div class="row row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-4">';

    fullCards.forEach((cards) => {
        console.log("One Card Added...")
        content += `<div class="col-sm-6 col-md-4 col-lg-3 col-xl-3">
                <div class="card card-round card50opacity-green">
                <div class="card-header">
                  <div class="card-head-row card-tools-still-right">
                      <h4 class="card-title">${cards.cardname} - ${cards.card_set_number}/${cards.cards_in_set}</h4>
                    </div>
                <p class="card-category">
                      ${cards.set_code} - ${cards.set}
                    </p>
                </div>
                <img class="card-img" src="${cards.img}" alt="Card image">
                  <div class="card-img-overlay">
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text">Last updated 3 mins ago</p>
                    
                  </div>
                </div>
              </div>`;

    
});
    content += '</div>'
    //console.log(content)
    document.querySelector("#cardlist").innerHTML += content;

However each col created is taking width:100% from the row class and not using the col assigned width.

You can see by the web inspection here:

Not sure why it isn’t using the col width, perhaps something to do with it being created after the page is ready?