CSS Div not taking full width

This is based on the Bootstrap to have responsive layouts. The issue I’ve is, it works on few cases and not on some other cases like this. As in the screenprint, the components are 50% width but something is preventing and so I’m getting only one Card instead of two. Not sure why. Can someone let me know what is wrong ?
image.png

You should read up the bootstrap docs. Placing all components in their own rows feels kinda out of place. Also using 50% width in a bootstrap row/column based UI is wrong as well, the components should just be 100% and let the outer columns determine their width.

This CSS is a nitghtmare for me. I blindly followed a bootstrap example and mimicked the same here. The 50% width is coming from the media query

On the other hand, without using Bootstrap, how can I create a response layouts using Vaadin layouts ? Say I’ve to create some cards, three cards, two cards, 4 cards etc responsively, how do I do that ?

For desktop it works, but for mobile it is not

all components gets overlapped or placed in zigzag

Vaadin Lumo Utility can get you quite far. But I’m also using my own custom bootstrap port in all my application cause I’m lazy.

Looks like the tutorial you used was sh*t. Even the outer container class is missing :grimacing:

any example or link ?

I had it before but I do not see any changes with or without container so I remvoed it

https://getbootstrap.com/docs/5.0/layout/grid/ the one and only truth

Added the container but still the result is same
image.png

First idea: swap the ordering of your css “small to large” e.g. col-xl last instead of first

If you click a column, you can see what css is applied and has the highest precedence to enforce the current width

image.png

image.png

Remove the p-m

may be some padding or margins issues ?

Yes it is

Bootstrap principal: don’t match components with layouts (I learned that the hard way)

So your component specific css should be on your component and not the layout (column)