p-datatable-gridlines does not work together with bootstrap

[wima75]

Hi
I have an angular application with bootstrap. When I add a p-table and set the styleClass to p-datatable-gridlines it does not show grid lines. When I don't import the bootstrap css, it works. I don't know how I have to configure it, to use both libraries.

styles.scss
`@import 'bootstrap/scss/bootstrap';
@import 'bootstrap-icons/font/bootstrap-icons.css';
@import '@ng-select/ng-select/themes/default.theme.css';

@import "primeng/resources/themes/lara-light-blue/theme.css";
@import "primeng/resources/primeng.css";`

[qwadrox]

• You need to create CSS layers for sure to separate the CSS that might interfere with PrimeNg: https://primeng.org/guides/csslayer#bootstrap

• Here is an example how I did: https://stackblitz.com/edit/smmbf9-dhq1oc?file=src%2Fstyles.scss I put the whole bootstrap on a separate layer.

• Because the main bootstrap file includes everything
  you don't need to separately import the bootstrap-reboot.css .

• Or if you go to the direction what the docs say, then import all component separately that you're using:

  @layer bootstrap-reboot, primeng
  
  @layer bootstrap-reboot {
    @import 'bootstrap/scss/bootstrap-reboot';
  }
  
  @import 'bootstrap/scss/bootstrap-grid';
  @import 'bootstrap/scss/bootstrap-utilities';
  @import 'bootstrap/scss/buttons';
  @import 'bootstrap/scss/pagination';
  @import 'bootstrap/scss/tables';
  @import "bootstrap/scss/helpers";

  With this way, you can reduce the size of imported CSS.

[wima75]

Thank you very much