Twitter Bootstrap Theme

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.

  • Babas007
    22 August 2012 at 13:18

    Great job!

  • Matthias Vianden
    22 August 2012 at 14:07

    Love this Theme! I already wasted about a day to get Bootstrap and flick to work together…

  • Liuk
    22 August 2012 at 14:07


  • Matthias Vianden
    22 August 2012 at 14:26

    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 :-/

    • Sebastián Garcia
      22 August 2012 at 17:59

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

      • Howard Smith
        22 August 2012 at 20:07

        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. 🙂

  • Humberto
    22 August 2012 at 20:36

    How can I build it from the source? Is it hosted on github?

  • Brian
    22 August 2012 at 21:30

    Nice start. Thank you for adding this! It would be nice if some components were a little closer to their Bootstrap counterparts, such as breadcrumbs ( and pagination in dataTable (, and maybe even dataTable itself (

  • Dhrubo
    23 August 2012 at 07:15

    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

  • Mediii
    23 August 2012 at 10:50

    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 !

    • Howard Smith
      29 August 2012 at 03:21

      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!

      • Howard Smith
        2 September 2012 at 05:52

        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! 🙂

        • Howard Smith
          2 September 2012 at 05:53

          PrimeFaces just keeps getting better and better…

  • httpeter
    23 August 2012 at 11:38
  • gaso
    30 August 2012 at 20:25

    Primefaces Rocks!!

  • Howard Smith
    4 September 2012 at 22:25

    Cagatay/Optimus, check this out (below). Your blog was posted at following URL:

    I learned about this since i am now using MyFaces and on their email list.

Post a Comment