Using PrimeNG with Bootstrap 4

Question

Currently, I am playing around with UI-Libraries for a new Angular 2 Project. I tried Ng-Bootstrap and Material. Unfortunately they are still in Alpha and Beta. I also checked PrimeNG. At the moment PrimeNG offers a lot more components than Material and NgBootstrap. Especially when it comes to tables. PrimeNG seems to be stable and ready to use for production.

I am not really pleased with the Grid System of PrimeNG. For example it is not clear how to perform a column offset for example. I couldn't find this in the documentation neither.

I started to use Bootstrap 4 with PrimeNG Components. To me it is not fully clear if this is a good way to do. It feels like I have two frameworks that are doing the same in some cases. For example if I want to create a button I could do the following just using Bootstrap classes.

<button class="btn btn-primary">Button with Bootstrap</button>

or I could do the following using PrimeNG

<button pButton type="button" label="Button created with PrimeNG"></button>

Am I missing some features of PrimeNG or is it valid to use Bootstrap in combination with PrimeNG as it offers more features when it comes to Grid-Layout?

Answer 1

There's nothing wrong with using Bootstrap along with PrimeNG. You can still use the CSS goodies of Bootstrap. But as you said you only want to use few features of Bootstrap (like its grid system) and not the others that you already have in PrimeNG framework then I recommend to customize the Bootstrap. For now there's no official option out there to customize Bootstrap as like it's in Bootstrap 3. But you can do it manually. Just download the source of Bootstrap (with Sass files) where you'll have separate files for every feature of Bootstrap, then you can comment out the files that you don't want like if you don't need it for buttons you can comment out the _buttons.scss file or _modal.scss etc. It will compile for you the CSS file which will only contain the CSS you want. But for this you need to have some basic knowledge about SASS.

Answer 2

I can see two disadvantages with your current approach:

• List other developers in your team might not immediately recognize that you're using two complete frameworks and use either one for the 'wrong' purpose within your context
• depending on your build system, you might be carrying a lot of unnecessary luggage.

That said, I think it's a valid approach. However, you might consider replacing bootstrap with a smaller dedicated library for grid layouts or nagging the PrimeNG team for specific grid layout related features or even just use plain flex-box.