UI frameworks with Vaadin - Twitter's Bootstrap


I’m new to Vaadin and I would know if it’s possible to use UI frameworks like this one within Vaadin:

Globally, is it possible to integrate Twitter’s bootstrap.js (even if I should rewrite the CSS part) ?
I’m interesting in Bootstrap’s components behaviors in order to not rewrite them in Vaadin.

Thanks for assistance.

Unfortunately, Vaadin (and other frameworks) have their own javascript engines which makes their UI components incompatible 99% of the time. The only way to make the components behave correctly in a Vaadin environment is to wrap each single component in a Vaadin client side widget.

Thanks for your reply.

Bootstrap and others CSS / Javascript frameworks comes with animations, transitions effects, specific placements etc. It seems that with Vaadin we should write them for each component?

For example, for the datetime picker we should write the open / close effect, eventually the specific placement of the picker relative to its call button and the complete CSS for each sub-component (next button, previous button, dates, etc.), right?

Bootstrap expects a certain DOM structure for it’s components, and Vaadin’s components don’t follow that structure, so they don’t mesh naturally together.

Either you need to modify the Vaadin component structures and class names to comply with Bootstrap (so you get the visual part), or you do as Thomas suggested and write completely new components for the Bootstrap widgets so that they can communicate with the Vaadin server part.

There are some easy wins to have, though, as you can set the primary style name for any component, so buttons and text inputs for instance should be quite easy to get working with the default Bootstrap CSS. Button groups are also easy to create with a CssLayout and Buttons/NativeButtons.

You can use CssLayouts to build up many of the wrapper elements for Bootstrap, but anything that requires more interaction than just a simple click is going to be more difficult and time consuming to get working (e.g. dropdowns, tabs, dialogs, tooltips).

Ok thanks Jouni.
I will experiment your solutions.

Just pointing out, that I’ve started an actual experiment with the new Bootstrap 3. You can follow the progress here:

hello sir, I want vaadin like user interface in bootstrap 3. please suggest links. thanks.