VaadStrap | Vaadin

Bootstrap Grid System for Vaadin

Designed to use bootstrap's grid system in Vaadin applications to enable mobile-ready views without writing a single line of CSS.

The library is ready to be used by any Vaadin project and requires no widgetset compilation.

Usage example:

@Viewport("width=device-width, initial-scale=1") // this is necessary
public class BootstrapUI extends UI {
	protected void init(VaadinRequest request) {
		Container container = new Container();

		Row row = container.addNewRow();
		Col col1 = row.addNewCol(ColMod.SM_6, ColMod.MD_4);
		Col col2 = row.addNewCol(ColMod.SM_6, ColMod.MD_4, VisibilityMod.HIDDEN_XS);
		col1.addComponent(new TextArea());
		col1.addComponent(new TextArea());
		col2.addComponent(new Text().append("This ").appendBold("column").append(" will be hidden in ").appendSmall("XS").append(" screens"));
		col2.addComponent(new HorizontalLayout(new Button("Login", event -> Page.getCurrent().setLocation("/login")), new Button("New User")));

Container has Row(s). Row has Col(s).

col-*-*, col-*-offset-*, col-*-push-*, col-*-pull-*, visible-*, hidden-* styles are available as enum constants. Look for ColMod, ColOffsetMod, ColPushPullMod, VisibilityMod, MarginMod classes.

In the future the library may be extended to support more bootstrap features and components through AbstractJavaScriptComponent. PR's are welcome.

Bootstrap version: 3.3.7


Link to this version
ExperimentalReleased 16 March 2017MIT License
Framework Support
Vaadin 8.0+
Also supported:
Vaadin 7 (0.1.2)
Browser Compatibility
Install with
Release notes - Version 0.2.1
  • Vaadin 8 support!
  • Improved builder API for Container, Row and Col classes
  • New Text and TextMod support for creating HTML5 text
  • Upgraded to Bootstrap 3.3.7 and removed unnecessary JS dependencies
  • Added login page example