Twitter Bootstrap Theme

Twitter Bootstrap is a front end framework consisting of CSS and JavaScript utilities. We have been getting questions from our community about integrating bootstrap with PrimeFaces so decided to work on it.

PrimeFaces Widgets are richer than what bootstrap provides so we will not wrap bootstrap widgets for sure. A JSF library would only need to wrap widgets of bootstrap to come up with a quick and dirty solution for JSF.

CSS part is the real value of bootstrap for us, for example the layout feature of bootstrap is really great and we’ve used the grid layout in a client project as it is. It doesn’t make sense to bloat your JSF view with components like <p:gridContainer /> since you can do the same with just adding a simple div easier. Your page will execute faster since there less components to process on server side.

The best way to integrate PrimeFaces and Bootstrap would be a PrimeFaces Theme by porting Bootstrap Look and Feel. PrimeFaces components are so easy to customize, we have applied the look of Bootstrap widgets to our own widgets easily, no new tags, no new components are necessary, just CSS magic.

Check out the Labs Showcase to see the Beta version of Bootstrap Theme in action.

Bootstrap theme will be available with the next themes release wagon soon. At the moment, you can build the theme from source to give a try.

This entry was posted in JSF. Bookmark the permalink.

19 thoughts on “Twitter Bootstrap Theme

  1. Me again: I just looked at the source of the css in the lab. Unfortunately I did not find the standard bootstrap scaffolding elements like container-fluid or span1, span12, span4 and so on.
    It would be nice if they are integrated as well because otherwise one need to trick with the two different css again. Which (see my preview post) can be a painful :-/

    • I dont think it is a good idea…because we use bootstrap layouts features with other themes than the new bootstrap theme.

    • BootStrap theme does not include bootstrap.css, our own style classes contain similar bootstrap ui properties to achieve the same look. If you need bootstrap you can still use it with any theme.

      • Interesting and thanks for this response. I was wondering about this since my endusers are loving themeSwitcher in my JSF/Primefaces (UI) web app. :)

        I will have to research this further and see how/if I can use bootstrap. :)

  2. No wonder why PF is the best JSF framework in the whole of universe. Care for developer wishlist has always been your priority. I was looking for it. Thanks

  3. Great job, just tryed the theme from the source and applyed this change on my web apps it works, now I am waiting for the next themes release Thank you !

    • Themes folder has been updated! Ever since this blog post, I’ve been watching Themes folder and waiting patiently for the modification datetime to be recent date. Now, the themes folders have Aug 28, 2012 date (and time). Yayyyyyy!

      I’m going to download and add to my JSF/PrimeFaces (3.4-SNAPSHOT) web app!

      http://repository.primefaces.org/org/primefaces/themes/

      • I’ve been using this Theme and I love it! So much to love about PrimeFaces! I’m glad many other people (developers/endusers/etc…) feel the same way! :)