Getting started with GWT-Bootstrap

Joinville · June 26, 2012

GWT-Bootstrap is a project that aims to provide all the Twitter Bootstrap styles and widgets to GWT applications. I had this idea in Jan/2012, and it was not a library, initially, I just made a simple InputText and Button widgets as a proof of concept, and then I think: “Why not?".

So, here we go. The initial release is almost done, and has a lot of widgets and functionally ported and working, including the awesome responsiveness and the great NavBar.

So, let's start using it.

Get the jar

There are 2 ways to get the jar:

Configuring you module

You will have to configure your App.gwt.xml file to inherit the GWT-Bootstrap widget library. You can do it like this:

<inherits name="com.github.gwtbootstrap.Bootstrap"/>

UiBinder usage

Assuming that you're using UIBinder, add the following namespace to the <ui:UIBinder> element:


Then you can easily use the b namespace in your widget design, like Heading:

<b:heading size="2">Hello World GWT-Bootstrap</b:heading>


We also have the bootstrap datepicker ported into GWT-Bootstrap, but, in a different module and namespace.

Add to your App.gwt.xml:

<inherits name='com.github.gwtbootstrap.datepicker.Datepicker' />

And in your Widget.ui.xml file:


Then, just use the widget like this:

<b2:DateBox format="dd/mm/yyyy" autoClose="true" />

Pros and Cons



Happy coding!