css - Using PrimeFaces with Bootstrap causes changes in padding/sizing/borders

Question

Well, I disabled all themes from PrimeFaces:

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

I do it because I'm using bootstrap 3 and I don't want to any conflicts in jquery-ui and bootstrap layout. The problem is that PrimeFaces datatable without "themes" becomes a white table with black borders, if I use the border-style:none, the border disappears but bootstrap style border disappears as well.

Look I tried:

<div class="table-responsive">
    <p:dataTable rowKey="#{banca.id}"
                 var="banca"
                 value="#{bancaMB.beans}"
                 paginator="true"
                 emptyMessage="N?o foi encontrado nenhum registro" 
                 rows="10"
                 id="dataTableBancas"
                 selection="#{bancaMB.bean}"
                 tableStyleClass="table table-striped"
                 selectionMode="single">
..
</dataTable>

Look my CSS:

.ui-datatable thead th,
.ui-datatable tbody,
.ui-datatable tbody tr,
.ui-datatable tbody td {
    border-style: none !important;
}

Look my datatable picture:

Answer 1

Almost all other components will fail to, look and feel wise. Since bootstrap 3 switched to a different box-sizing (border-box instead of content-box). So lots and lots of small ui things will fail in PF components, like icons in selectlists being wrongly positioned etc... It is very difficult to fix all these in my opinion.

If you want to use bootstrap for the responsive layout things, PF something similar to, called the grid css and more is comming