Integration with PrimeFaces

Many people are using PrimeFaces together with BootsFaces. A common strategy is to use BootsFaces to benefit from the layout, and to add PrimeFaces because it has some very advanced widgets.

Unfortunately, the CSS frameworks of PrimeFaces and BootsFaces are incompatible. As soon as you add BootsFaces, the layout of many PrimeFaces widgets is destroyed. Follow this link to learn how to fix this incompatibility. Both frameworks have a couple of components in common, so there are two interesting strategies:

Configuration

Add these lines to your Maven pom.xml file:

Download the PrimeFaces Bootstrap theme, add it to your application's lib folder, and activate it in the web.xml like so:

You need to add some CSS to make PrimeFaces and BootsFaces compatible. Read the full story here. The CSS code is just a sketch indicating at what to do.

Example for Scenario 1

Even with the Bootstrap theme, PrimeFaces components don't blend into the Bootstrap look perfectly. On the other hand, PrimeFaces has a lot of advanced components BootsFaces doesn't provide - and probably never will. So it's a good idea to use the "bread and butter" widgets of BootsFaces and use PrimeFaces for the advanced widgets:

Live preview

Code39
www.

Example for Scenario 2

The demo below is taken from the PrimeFaces showcase. We adapted it slightly to take advantage of the BootsFaces API.

Values
Inline:
Popup:
Button:
Event:
German:
Restricted:
Multiple:
Effect:
Mask:
Datetime:
Time: