Using "foreign" CSS in Vaadin

Hi, there are several CSS Files for example Admin Templates & Dashboards - WrapBootstrap Some of them are useable with Thymeleaf. Is it possible to use those css files in Vaadin?

I tried it adding a css class to a button from one of this css classes, but oh wonder it dont work. Its because we need to address the vaadin parts of a component which the css doesnt do?

It depends very much on the elements that CSS is targeting. If it targets layouts, Divs, Spans, etc, it will work just fine, provided that the correct classnames are applied.

Vaadin components on the other hand are much more than the single html elements (like <button>) that most 3rd party stylesheets target, they’re much more feature rich, and in order to be that, they also need more complex HTML structures, which means CSS that is unaware of that structure can’t possibly work.

Also, unless you’ve specifically disabled loading the default Lumo styles with the @NoTheme annotation, any CSS you load will always be on top of those, rather than on top of a blank slate, so the results would regardless not be what you expect.

The same goes for pretty much any component library, not just Vaadin.

1 Like

You can use bootstrap with Vaadin but it’s mostly useful for templates not really for the component like text field. Bootstrap needs a html structure that is specific to bootstrap.

There is an example here: bootstrap-for-vaadin - Vaadin Add-on Directory

1 Like