I have a bootstrap 5 project with a row that has repeat children, each iteration has 4 columns, and am using the row class row-cols-4 to ensure my 4 columns take up full width of row.
Each row represents a single record from DB, therefore the 4 columns should always be in a single row.
3 of the 4 columns display is controlled by that columns own check box, if checked then display that column, if unchecked then hide it.
What I am struggling with is how to dynamically control the row class row-cols-4 to ensure each DB record remains on its own display row
eg if no columns are hidden then row class = row-cols-4
if any 1 column is hidden then row class = row-cols-3
if any 2 columns are hidden then row class = row-cols-2
This has got me stumped, anyone have any ideas, or any other suggestions?
Last updated: