PrimeNG Meets Boostrap

PrimeNG Meets Boostrap

PrimeNG meets Bootstrap, the all-new premium Avalon template features bootstrap 3 inspired styling, 4 menu modes with dark and light alternatives, 14 themes, various layout color schemes and more. In total there are over 4000 combinations where your users can define their own UI experience.


Styling is inspired by Twitter Bootstrap 3 that allows PrimeNG components look like bootstrap components and work with other bootstrap utilities like widgets and css helpers in harmony.

Note that Avalon does not depend on Bootstrap and can be used standalone as well. We also have plans to add an option for Bootstrap 4 styling as well. This also means the basic bootstrap theme in PrimeNG core is deprecated and will not be maintained anymore as we’ve decided to focus on Avalon for Bootstrap styling.

4000+ Layout Combinations

Avalon provides 4 menu modes out of the box; Static, Overlay, Horizontal and Static with light and dark alternatives. There are two profile modes and various layout colors such as flat and gradient. In total there are 4000 layout combinations.

14 Themes

Avalon theme is highly customizable, there are 14 built-in themes and creating your own theme is a matter of defining a couple of sass variables.

Mobile Optimized

Enhanced mobile experience touch optimized responsive design elements.

Templates Pages

Landing, login and error pages are provided as template pages to get started with building your app in no time.

Live Preview

Live Preview is available at Avalon Showcase, we suggest trying out different theme colors to find your favorite.


Avalon is available at PrimeStore.

No Comments

Sorry, the comment form is closed at this time.