GwtBootstrap3 is a GWT wrapper for Twitter's Bootstrap library version 3 containing design templates, styles and beautiful widgets.
Have a look at the demo and its source code. Also use the Google Group for help/discussion.
Note: This library is not yet feature complete. Patches / pull requests are welcome. See Feature matrix below.
Add the dependency to your Maven POM:
<dependency>
<groupId>org.gwtbootstrap3</groupId>
<artifactId>gwtbootstrap3</artifactId>
<version>0.5</version>
<scope>provided</scope>
</dependency>or if you want to use the snapshot release:
<dependency>
<groupId>org.gwtbootstrap3</groupId>
<artifactId>gwtbootstrap3</artifactId>
<version>0.6-SNAPSHOT</version>
<scope>provided</scope>
</dependency>In order to use snapshot releases you also need to add the Sonatype snapshots repository to your POM:
<repositories>
<repository>
<id>sonatype-nexus-snapshots</id>
<url>http://oss.sonatype.org/content/repositories/snapshots</url>
<snapshots>
<enabled>true</enabled>
</snapshots>
<releases>
<enabled>false</enabled>
</releases>
</repository>
</repositories>Inherit the GwtBootstrap3 module in your GWT module:
<module>
<inherits name="org.gwtbootstrap3.GwtBootstrap3"/>
...
</module>If you want to use the Bootstrap 2 "look-alike" theme inherit GwtBootstrap3Theme
instead of GwtBootstrap3.
Make sure to not inherit GWT's default styles or any other styles because Bootstrap brings its own styles which are provided by the GwtBootstrap3 module.
Use the widgets in your UiBinder XML:
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:b="urn:import:org.gwtbootstrap3.client.ui">
<b:Container>
<b:PageHeader>Yay buttons!</b:PageHeader>
<b:Button>Some button</b:Button>
<b:Button type="DANGER" size="LARGE">Dangerous button</b:Button>
</b:Container>
</ui:UiBinder>or create them in code if that's what you prefer.
Tip: GwtBootstrap3's styles and widgets, especially the fluid grid system, work best when using the "classic" panels throughout your application and not the absolute positioned layout panels introduced in GWT 2.0.
If you want to use a Custom Bootstrap v3 Theme from websites like wrapbootstrap its super easy.
- Inherit GWTBootstrap3 module like normal
- Download the theme that you want (make sure that it is Twitter Bootstrap v3 compatible (** Will not work with Twitter Bootstrap v2.x.x themes **)
- Put the CSS files and any needed JS files into the public folder or create a resources folder for these files
- Link this file as "public" in your *.gwt.xml
- After the inhert of GWTBoostrap3 module, put stylesheet linkers for these CSS/JS files
With the inheritance of CSS, the stylesheet that was added last will be the priority. Hence this will override the default theme.
If you have any questions, please refer to the Google Group above.
<module>
<inherits name="org.gwtbootstrap3.GwtBootstrap3"/>
<public path='resource'>
<include name='css/*.css'/>
<include name='js/*.js'/>
</public>
<stylesheet src='css/theme.css'/>
<script src='js/theme.js'/>
</module>If for some reason you need to completely disable the serving of the internal Bootstrap CSS, simply inherit the GwtBootstrap3NoTheme module instead of GwtBootstrap3.
<module>
<inherits name="org.gwtbootstrap3.GwtBootstrap3NoTheme"/>
...
</module>If for some reason you need to completely serve the JS/CSS for your project from CDNs, simply inherit the GwtBootstrap3CDN module instead of GwtBootstrap3.
<module>
<inherits name="org.gwtbootstrap3.GwtBootstrap3CDN"/>
...
</module>Following Bootstrap features are natively supported by GwtBootstrap3 through widgets. Other Bootstrap features still can be used with plain HTML and JavaScript, see Bootstrap's documentation.
| Feature | Status | In Demo |
|---|---|---|
| Grid system | Supported | Yes |
| Typography | Supported | Yes |
| Code | Supported | Yes |
| Tables | Supported | Yes |
| Forms | Supported | Yes |
| Buttons | Supported | Yes |
| Images | Supported | Yes |
| Responsive | Supported | Yes |
| Feature | Status | In Demo |
|---|---|---|
| Icons (FontAwesome v4.0.3) | Supported | Yes |
| Dropdowns | Supported | Yes |
| Button groups | Supported | Yes |
| Button dropdowns | Supported | Yes |
| Input groups | Supported | Yes |
| Navs | Supported | Yes |
| Navbar | Supported | Yes |
| Breadcrumbs | Supported | Yes |
| Pagination | Supported | Yes |
| Labels | Supported | Yes |
| Badges | Supported | Yes |
| Jumbotron | Supported | Yes |
| Page Header | Supported | Yes |
| Thumbnails | Supported | Yes |
| Alerts | Supported | Yes |
| Progress bars | Supported | Yes |
| Media object | Not supported | No |
| List group | Supported | Yes |
| Panels | Supported | Yes |
| Wells | Supported | Yes |
| Feature | Status | In Demo |
|---|---|---|
| Modal | Supported | Yes |
| Scrollspy | Supported | No |
| Tooltip | Supported | Yes |
| Popover | Supported | Yes |
| Collapse | Not supported | No |
| Carousel | Supported | Yes |
| Affix | Supported | No |
GwtBootstrap's widgets are designed to mimick the HTML structure of Bootstrap UI elements as best as possible while not introducing another layer of abstraction. While this might result in a bit more typing it also offers greater flexibility and reusability of components. Thus it should be relatively easy to translate Bootstrap's HTML code into UiBinder XML.
For example a button dropdown is implemented in UiBinder XML like:
<b:ButtonGroup>
<b:Button toggle="DROPDOWN">Test</b:Button>
<b:DropDownMenu>
<b:ListItem>Item 1</b:ListItem>
<b:ListItem>Item 2</b:ListItem>
<b:ListItem>Item 3</b:ListItem>
<b:Divider/>
<b:ListItem>Item 4</b:ListItem>
</b:DropDownMenu>
</b:ButtonGroup>Compare this to the HTML version:
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Test <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li class="divider"></li>
<li><a href="#">Item 4</a></li>
</ul>
</div>