JSF applications often get called ugly, or cookie cutter. The over use of the components and built in CSS creates the standardized look, but lacks flexibility. Using Bootstrap 3 CSS in combination with JSF attributes you can create a modern look. Take for example this salary sample salary calculator program which leverages JSF components.
The following code is used to create the amount input area.
<div class="form-group #{!amount.valid ? 'has-error' : 'none'}"> <h:outputLabel value="Amount" for="amount" /> <div class="input-group"> <span class="input-group-addon"><i class="fa fa-dollar"></i></span> <h:inputText id="amount" value="#{myBean.amount}" binding="#{amount}" styleClass="form-control" required="true" requiredMessage="Enter dollar amount"/> </div> </div>
This technique uses bindings to get the validation state of the inputText component. More information can about component bindings can be read on my other article “What is a JSF component binding? How can I use it?“. By intermixing both JSF + Bootstrap you can see how simple it is to give your app a modern look.