Hello,
How can I achieve this layout with Bootstrap 4, I dynamically add these divs:
Best regards!
I’m not into BS, but I thought it dealt with rows, rather than columns, or at least uses straight rows to contain the columns, like a grid.
This would be doable certainly with flex or possibly css columns. Probably grid too.
1 Like
I have one row that wraps all columns, columns are dynamically generated.
You won’t be able to create that ‘masonry type layout’ easily using bootstrap or flex.
There’s a css example here that talks through the problems.
CSS columns are probably the best approach. I’ve modified a bootstrap layout here with the necessary rules.
You;ll have to add media queries etc for smaller screens and reduce trhe column count accordingly.
This is untested in anything but Chrome so needs further testing in other modern browsers but I am out of time today. (CSS columns had a few bugs last time I tried anything complicated vbut may have improved since.)
1 Like
Thank you very much!
Yes, come to think about it, to have wrapping columns in flex you need to specify a height in some way, which is awkward.
I suspect the problem with bootstrap is the row governed grid system I mentioned.
Defining a column-width may negate this need as it sets a minimum width at which the column count reduces.
1 Like
For anyone using Bootstrap 4 and wants to make Masonry layout, check this out on Bootstrap’s documentation:
1 Like
Thanks for the link 
That’s basically the same as the code I gave you as it uses css columns to achieve that
effect except that bootstrap has some pre-defined classes for it.
This is why you never learn css properly when using a framework because its often easier in raw css and when you understand css you can do anything you like whether the framework supports it or not .
2 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.