Using the Grid category's Row and Column components, I ran into something that has me puzzled.
A Row has a "Per Row" option which, according to its tooltip, you can use to set the number of columns that will fit in a row. This option has a dropdown with the values "Default", and 1 through 5.
Now, what puzzles me, is why there is a limit of 5. It's not just that the dropdown is limited and you can still enter another value. I tried that. It's also not related to any width settings - I've tried with the row in a default column and with the row in a specifically sized column, and the limit stays at 5 regardless.
Why is this limit imposed?
I need 7 column rows within another column, and sort of expected the "Per Row" option to "force" the columns to size to allow the specified number to fit in the row.
What am I missing here?
Thanks in advance, kind regards, Marjan
What do you mean by "grid category?" Where are you seeing this "per row" option? The only options available to rows are Gutters (on or off), Align Columns X and Align Columns Y.
The Bootstrap grid system uses containers > rows > columns and supports up to 12 columns by default.
Can you post a screenshot or a link to your project file or site?
Just click any row now and you have a new option for the Per Row setting. I believe that's the new setup for adding multiple rows and columns at a time.
It's not so much for adding them automatically as it is for getting a specific number of columns in a row that are all equally sized in width and together take up the entire width of the row.
The number of columns per row, unfortunately, is limited to a maximum of 5. See screenshot.
I have since found that this "Per Row" setting uses the bootstrap grid row-cols-n classes. Interestingly the bootstrap-grid.css has a row-cols-6 class, but no more. So the limit in Bootstrap Studio could actually be six, but ok.
I have taken the bootstrap code for these classes as inspiration and created my own row-cols-7 and row-cols-8 classes. Works beautifully. I can now get 7 columns of equal width in a row.
Ohhh... this is new to version 5.x, which I have yet to install. Sorry. This drop-down does not exist in Version 4.x
Hover over the ?. Gives an explanation of the option. The numbering is a quick col setup i.e. pre-defines col widths. If you want more columns to be able to be in a row set it to default (normal behavior). Then set individual column settings on the cols.
30K+ user component downloads