Horizontal, inline, and stacked formsbreaking change in 1.1.0

There are three different types for form layouts:

• By default, forms are stacked. The labels are above the input fields, and both labels and input fields are aligned left.
• You can also define horizontal forms. To do so, use the BootsFaces <b:form horizontal="true"/> tag. In order to align horizontal forms neatly, add the attributes label-col-xx="4" and col-xx="8. (Of course, you can also use the symbolic names of BootsFaces, such as label-small-screen="one-third").
• Inline forms are define by <b:form inline="true"/>. In this case, you have to use the CSS width attribute to align everything neatly. By default, every component within a row is put close to each other.
  Note that in BootsFaces 1.0, some corner cases aren't support yet. In particular, input field with facets may be broken in inline forms, as you can see below.
• Breaking change (1.0.0): Before BootsFaces 1.0, inline forms were defined by adding inline="true" to the input field. This feature is deprecated (because it generated wrong HTML code). Adding insult to injury, it's broken since BootsFaces 1.0. You can see such a broken example at the bottom of this page. Please migrate to the new horizontal forms.
• Breaking change (1.1.0): We've removed support for multi-line inline forms. It seems that Bootstrap considers inline forms to always consists of a single row. If you need multi-line forms, please use horizontal forms.

<b:form />

Basically, <b:form /> is identical to the standard JSF component <h:form />. It adds the attributes inline="true and horizontal="true". These attributes convert your regular (stacked) form into an one-line inline form or into a multi-line horizontal form.

<b:formGroup />

If you want to put muliple JSF elements into the same line of a horizontal form, you need to add a <b:formGroup />. Otherwise, BootsFaces generates a form-group div for each component, thus ruining the layout.

About this demo: Most of the examples also demonstrate AJAX. When you move the mouse over a field, it's updated with random input. Two input field types (date picker and multi-select combobox) don't support direct AJAX yet, so they are updated by an extra button.

Inline form

Regular BootsFaces b:form (stacked)

Horizontal form