Panel grids

Using a panel grid is a convenient way to display a couple of input fields. BootsFaces aligns your input fields automatically. You don't have to care about <b:row> and <b:col> . BootsFaces panel grid adds these tags automatically for you.

The difference to a standard JSF <h:panelGrid> is that standard JSF generates a table instead of Bootstrap-friendly row and col divs.

Basic example

The attribute colSpan of <b:panelGrid /> takes the a comma-separated list of numbers. Each number defines how many Bootstrap columns a <b:panelGrid /> column spans.

colSpan="2,10" means the content of the <b:panelGrid> is arranged in to columns. The first colum takes 2 Bootstrap columns (16% of the available space), the second column take the remaining 10 Bootstrap columns (83% of the available space).

Attribute Default value Description
colSpans (none) Comma-separated list of integers that must add up to twelve. Defines how many Bootstrap columns each column of the panelGrid spans.
size lg Optional. Legal values are lg, md, sm and xs. Influences the grid size.
id (none) Unique identifier of the component.
style (none) CSS style.
styleClass (none) CSS class
rowClasses (none) Optional comma-separated list of CSS classes that are applied to the rows. If there are more rows than rowClasses, BootsFaces starts with the first row class again.
columnClasses (none) Optional comma-separated list of CSS classes that are applied to the rows. If there are more columns than columnClasses, BootsFaces starts with the first column class again.
If a column class contains one of the standard col-{{size}}-{{width}} classes (e.g. col-lg-3), it override the corresponding colSpans setting.

<b:panelGrid> uses the standard Bootstrap CSS classes:

  • The panelgrid is a div bearing the CSS class container.
  • Each row is a div bearing the CSS class row.
  • Each column is a div bearing the CSS class col-lg-1 - col-lg-12.