Using PrimeNG with Bootstrap 4

Viewed 21976

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?

3 Answers

PrimeNG actually has 2 Grid systems - an older one similar to the Bootstrap 3 grid system, and a new one that is a FlexGrid-based grid system. They list the older one as deprecated, but if your user base will potentially use browsers that don't support FlexGrid, you will need to use the "deprecated" Grid.

Their Grid has 12 columns, just like Bootstrap, and uses classes like ui-g, ui-sm-*, ui-md-*, ui-lg-* and ui-xl-* where the * is a number from 1 to 12. Instead of the class row that Bootstrap 3 uses, you use ui-g for a new row.

That being said, having used both Bootstrap 3 and PrimeNG, I can see why you might want to combine the 2. Many things are much easier to use in Bootstrap, but if you need advanced controls, like an editable table, then PrimeNG beats Bootstrap. If you are just using tables in a read-only fashion, then Bootstrap is fine.

Related