Primefaces components rendering with twitter bootstrap layout

Question

I integrated Twitter Bootstrap v2.3.1 in a Primefaces v3.5 project, I used Bootstrap for layout and Primefaces for components.

But I get a problem when using DataTable, it does not render well as you can see in the picture:

by using Firebug I figured out the problem, the default css of primefaces inputs get ovveridden by the Bootstrap input styles

here are the stylesheets loaded in the order:

<link type="text/css" rel="stylesheet" href="/projet/javax.faces.resource/theme.css.xhtml?ln=primefaces-aristo" />

<link type="text/css" rel="stylesheet" href="/projet/javax.faces.resource/bootstrap.css.xhtml?ln=css" />

<link type="text/css" rel="stylesheet" href="/projet/javax.faces.resource/bootstrap-responsive.css.xhtml?ln=css" />

<link type="text/css" rel="stylesheet" href="/projet/javax.faces.resource/primefaces.css.xhtml?ln=primefaces" />

as you see the theme.css get ovveridden by bootstrap.css

so is there a way to load all primefaces stylesheets after thoose of Bootstrap? or is there any other solution to get correct rendering of Primefaces componenets?

Answer 1

I just needed to customize (uncheck Forms under Base CSS) the bootstrap framework before downloading it!

Answer 2

There is no hard and fast rule for applying stylesheets.

Its all dependent on you so its not a solution to change the stylesheet order and in your case its is done with !important but it is good to use Chris Coyier tells you when to use !important, so specificity mechanism within the CSS cascade that aids conflict resolution somewhere can help you in this.

You can read about it at sitepoint and test yours at Specificity Calculator.