Dynamic column arrangement in bootstrap grid (bootstrap+vanilla js)

Question

I am creating a grid (so something with rows and columns with buttons in the cells) and a slider that should alter the number of columns.

The number of rows is virtually unlimited and, since the grid layout in bootstrap is implemented with a flexbox i should either swap column classes or redraw everything every onchange event.

is there another way in bootstrap or do i need to create a grid layout from scratch and alter the column layout each time?

Answer 1

i managed to do that by adding a counter of elements inside a row and whenever i reach the desired element number i append a new row and start adding elements to the last row

like so

   if(indexofrow%element.getColNumber()==0){
            indexofrow++;
            document.getElementById("canvas").insertAdjacentHTML("beforeend","<div class='row flex-nowrap'/></div>");
            drawSingleButton(i,element,arrayOfLayers);
        }else{
            drawSingleButton(i,element,arrayOfLayers);
            indexofrow++;
   }

it's probably a cheap workaround but for my case it works