Twitter Bootstrap with Primefaces (JSF)

Question

I\'m trying to use Primefaces 3.2 (perhaps it\'s related to JSF in general) with Twitter Bootstrap 2.0.2 (http://twitter.github.com/bootstrap).

I\'ve added to the st

Answer 1

You are including JQuery twice (Primefaces imports it automatically). Remove your manual import:

<script src="/erp/resources/js/jquery-1.7.2.js"></script>

and everything should work.

Answer 2

First of all you better use h:outputScript to load js files...

I think its cause of conflicts between primefaces jquery and the manually included one...

PrimeFaces 3.2 comes with jQuery 1.7.1, So...

Remove the

<script src="/resources/js/jquery-1.7.2.js"></script> from your code

and modify your include in the following way in your <h:head> element

<f:facet name="first">
  <h:outputScript library="js" name="bootstrap.js"/>
</f:facet>
<h:outputScript library="primefaces" name="jquery/jquery.js"/>
<h:outputScript library="js" name="bootstrap-dropdown.js"/>

Also take a look at JQuery Conflicts with Primefaces? and related resource ordering.

Answer 3

there is an easier way to add this theme.

If you are using a maven project bases do this:

Add dependency

    <dependency>  
        <groupId>org.primefaces.themes</groupId>  
        <artifactId>all-themes</artifactId>  
        <version>1.0.9</version>  
    </dependency>

Or add a specific theme dependency

Add this in your web.xml

    <context-param>
      <param-name>primefaces.THEME</param-name>
      <param-value>bootstrap</param-value>
    </context-param>

If you are not using Maven, download the jar manually and add It to your classpath:

http://repository.primefaces.org/org/primefaces/themes/

References:

• http://www.primefaces.org/showcase-labs/ui/home.jsf?theme=bootstrap
• http://blog.primefaces.org/?p=2139
• http://primefaces.org/themes.html