Directory

← Back

BsLayout

Vaadin Java integration of the responsive Bootstrap 4 layout

Author

Contributors

Rating

Vaadin Java integration of the responsive Bootstrap 4 layout. Based on layout package of the lit-element-bootstrap project.

Sample code

// basic usage
BsLayout layout = new BsLayout();
BsRow row = layout.addRow();
BsColumn col1 = row.addColumn(new BsColumn(new Label("Column 1-1")));
col1.addSize(Size.MD, 3);
BsColumn col2 = row.addColumn(new BsColumn(new Label("Column 1-2")));
col2.addSize(Size.MD, 3);
BsColumn col3 = row.addColumn(new BsColumn(new Label("Column 1-3")));
col3.addSize(Size.MD, 3);
col3.addOffset(Offset.MD, 3);
// fluent api
BsLayout layout = new BsLayout().withRows(
	new BsRow().withColumns(
		new BsColumn(new Label("Column 1-1")).withSize(Size.MD, 6),
		new BsColumn(new Label("Column 1-2")).withSize(Size.MD, 3),
		new BsColumn(new Label("Column 1-3")).withSize(Size.MD, 3)
	),
	new BsRow().withColumn(
		new BsColumn(new Label("Column 2-1"))
			.withSize(Size.MD, 6)
			.withOffset(Offset.MD, 6)
	)
);
// default column sizes
BsLayout layout = new BsLayout().withDefaultSizes(12, 4, 4, 3, 2).withRow(
	new BsRow().withColumns(
		new BsColumn(new Label("Column 1-1")),
		new BsColumn(new Label("Column 1-2")),
		new BsColumn(new Label("Column 1-3"))
	)
);
// reordering columns
BsLayout layout = new BsLayout(
	new BsRow(
		new BsColumn(new Label("1-st, but 3-rd on mobile"))
			.withOrder(Order.XS, 3)
			.withOrder(Order.SM, 1),
		new BsColumn(new Label("2-nd"))
			.withOrder(Order.XS, 2)
			.withOrder(Order.SM, 2),
		new BsColumn(new Label("3-rd, but 1-st on mobile"))
			.withOrder(Order.XS, 1)
			.withOrder(Order.SM, 3)
	)
)
.withDefaultSize(Size.XS);

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Added column reordering support

Released
2022-12-05
Maturity
TESTED
License
Apache License 2.0

Compatibility

Framework
Vaadin 23+
Browser
N/A
Online