Docs

Documentation versions (currently viewingVaadin 24)
Documentation translations (currently viewingEnglish)

Board

Board is a powerful and easy-to-use layout element for building views that work with various screen sizes.
Note
Commercial Feature

A commercial Vaadin subscription is required to use Board in your project.

Board is a powerful and easy-to-use layout element for building responsive views. It reorders the components inside it on different screen sizes while maximizing the use of available space.

Open in a
new tab
Source code
BoardBasic.java
ExampleIndicator.java
ExampleIndicator.java
ExampleChart.java
ExampleChart.java
board-basic.tsx
ExampleChart.tsx
ExampleIndicator.tsx
board-basic.ts
example-indicator.ts
example-indicator.ts
example-chart.ts
example-chart.ts

Use Board to create responsive views and dashboards that work on any screen size.

Responsive

Board is responsive by default, meaning that it doesn’t require any custom development. Its layout is automatically optimized and adjusted based on the screen size, ensuring that the components utilize all available space.

Rows & Columns

Board is made up of rows. Each row supports up to four columns and can contain up to four components.

Nested Rows

Rows can be nested for finer-grained control of how certain areas of the layout behave on resize, and how they are rendered.

Open in a
new tab
Source code
BoardNested.java
ExampleIndicator.java
ExampleIndicator.java
ExampleStatistics.java
ExampleStatistics.java
board-nested.tsx
ExampleIndicator.tsx
ExampleStatistics.tsx
board-nested.ts
example-indicator.ts
example-indicator.ts
example-statistics.ts
example-statistics.ts

Column Wrapping

Columns automatically wrap on to new lines as the viewport narrows. The wrapping behavior for a row with four columns and four components is shown below.

Important
Use the draggable split handle to resize the layout and see how the columns wrap.
Open in a
new tab
Source code
BoardColumnWrapping.java
board-column-wrapping.tsx
board-column-wrapping.ts

Column Span

By default, the components in a row share the space equally. A component can be made to stretch across two or three columns by setting its column span.

The possible combinations are shown below:

Open in a
new tab
Source code
BoardColumnSpan.java
board-column-span.tsx
board-column-span.ts

Breakpoints

Board adjusts its layout based on the layout container width. The following three container widths, called breakpoints, trigger a layout change:

Breakpoint Container width Max number of columns

large

≥ 960 pixels

4

medium

600–959 pixels

2 or 3[1]

small

< 600 pixels

1

Breakpoints can be customized by overriding the CSS custom properties --vaadin-board-width-small and --vaadin-board-width-medium.

Breakpoint-Specific Styling

You can apply different styles for each breakpoint, for example to change the font size and space between components.

Important
Use the draggable split handle to resize the layout and see how the board styling changes at different breakpoints.
Open in a
new tab
Source code
BoardBreakpoints.java
board.css
board-breakpoints.tsx
board-breakpoints.ts
board.css

C2E98F9B-DC19-4C1D-8538-843235BA8701


1. A row with three equal-width components doesn’t wrap until the small breakpoint.