Use 'Bootstrap' theme

Question

I am trying to change PrimeNG theme in an Angular 6 app with no success.

This is from angular.json - I am trying to use the "Bootstrap" theme:

...
styles": [
              "node_modules/primeicons/primeicons.css",
              "node_modules/primeng/resources/themes/redmond/theme.css",
              "node_modules/primeng/resources/primeng.min.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
...

But the theme didn't change to "Bootstrap" style:

Answer 1

PrimeNg used to have some free themes. One of them was a Bootstrap theme. It was different from Bootstrap, but just had Bootstrap-like look and didn't require Bootstrap as a dependency.

At the time of writing this answer, PrimeNG 6.1.0 has deprecated all free themes except nova theme with three variations nova-colored, nova-light and nova-dark.

To apply PrimeNG free theme, just import theses files in your style.css:

@import url("../node_modules/primeicons/primeicons.css");
@import url("../node_modules/primeng/resources/themes/nova-colored/theme.css");
@import url("../node_modules/primeng/resources/primeng.min.css");

stackblitz demo

In old versions of PrimeNG 5.x, we could apply the Bootstrap theme like this:

@import url("../node_modules/font-awesome/css/font-awesome.min.css");
@import url("../node_modules/primeng/resources/themes/bootstrap/theme.css");
@import url("../node_modules/primeng/resources/primeng.min.css");

UPDATE:

PrimeNG old free themes are no longer maintained after PrimeNG 6.1.0 is released:

Free themes prior to 6.1 are now deprecated and will not be maintained anymore as they were outdated and hard to maintain due to their implementation. With 6.1.0, whether free or premium, all themes offered will be developed by PrimeNG Theme Designer. This will help us maintain all themes from a central location.