CSS Struggles

I’m trying to create a responsive application which needs lot of CSS knowledge which I do not have. I started looking into them but the learning curve is deep to have a professional design. So, wondering how I can use some bootstrap CSS files in Vaadin ? I see there are plenty of examples and they’re already responsive for all screens. What you guys suggest/think ?

I’m using the bootstrap-grid.css within my Vaadin applications with great success.

You could also check out the Lumo Utility Classes that provide a lot of pre-written CSS packaged behind Java constants: https://vaadin.com/docs/latest/styling/lumo/utility-classes
(they’re much more limited than Bootstrap though)

the main problem I’ve is, responsiveness. Figuring out how to add the correct size. These LumoUtility helps a lot but I don’t know how to achieve responsiveness using this LumoUtility

My objective is to create an application like this using Vaadin


One solution is to use bootstrap grid like here: https://jeanchristophe.app.fi/bootstrap-for-vaadin-demo/layout/grid/
bootstrap-for-vaadin - Vaadin Add-on Directory

( if it’s only for the bootstrap grid you can also import only some part of the bootstrap framework)