Unfortunately I’m not really familiar enough with bootstrap to help with issues using it with Vaadin, but I can say that it’s probably best to stick with div, main, etc instead of the layout components if you want to use it since it’s likely to conflict with similar css applied by the Vaadin layouts.
Hi @nice-camel
You are having multiple padding , one from Vaadin and second from bootstrap, which is around 50px each side.
Either remove padding from Vaadin layout or bs one
Plus fluid container has no effect in flex,
Check this code example how to create Card and responsive CSS Grid of Cards using LumoUtility classes And example how to creare a simple Card component using LumoUtility classes as well as how to layout those in the view using responsive CSS Grid with LumoUtiility classes in Vaadin 24 · GitHub
As you see, use of Bootstrap is not needed at all here.
IMHO if you do not need other things from Bootstrap, using it makes your life more complicated that it needs to be as you need to resolve different kinds of glitches where Lumo and Bootstrap collides. As I said earlier, the situation would be different if you are required to build the whole UI with Bootstrap, but then you need to know Bootstrap in detail and that requires much more work than building UI using Vaadin’s own Lumo design system.
@yummy-rhino amazing. I was not aware much about LumoUtility.
Yes, it works a Charm. Thanks a lot @yummy-rhino
True. Stumbling between BS and Lumo CSS rules makes the development work too complicated.
all these are taking equal size, how do I say one card take 80% and rest 20% width?
There is a CSS class card.addClassName(LumoUtility.Grid.Column.COLUMN_SPAN_2); which can be used to achive the same. Now all my layouts are completely responsive!!!
Another advantage of this approach is, I don’t have to look for BrowserResizeWindow Listener and then have two segments of code one for mobile and another for desktop ( there are few cases where we need this but in general, these classes are enough to get responsive layouts)