JSF and Twitter Bootstrap Integration

JSF and Bootstrap

Bootstrap is a popular front-end framework for developing responsive websites, and as the mobile devices are taking a good share of the web browsing, it’s important to consider a mobile friendly website (mobile first).

Starting from PrimeFaces 5.1, PrimeFaces will focus on improving the responsiveness of the components (e.g. p:panelGrid ) depending on the screen size will adjust, so this is a good time to consider adding responsive to your projects.

In this tutorial you’ll need:

  • NetBeans
  • Maven (3.x)
  • JSF (2.x)
  • Bootstrap (3.x)
  • font-awesome (4.x)

Table of contents:

  1. Include Bootstrap into a Template
  2. Implementing Dashboard Template
  3. Adding font-awesome

You may skip the first step if you have already created the project


1- Include Bootstrap into Template

If you don’t have a template yet, please refer to how JSF 2.0 Templating is done, after you have your template ready download Bootstrap, Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap. You’ll see something like this:

Copy bootstrap  folder into  resources

For the tutorial purpose I won't work with the minified versions (*.min.css).

Resolving Bootstrap Fonts

Open bootstrap.css  under css  folder, search for  @font-face , you would have something like this:

Now point to the locations of the fonts using  #{resource[]}

 Integrate Bootstrap into the main template file

In your main template file, include bootstrap.css  and bootstrap.js  alongside jQuery

jQuery is already shipped with PrimeFaces, but if you don't use any PrimeFaces component inside your page bootstrap would complain of the missing jQuery dependency

To ensure proper rendering and touch zooming, add the viewport meta tag to your <head> .

 


 

2 – Implementing Dashboard Template

You can find many template examples, I’ll implement the dashboard template as it’s the most common case.

CSS

Create dashboard.css  inside  webapp/resources/css  (see dashboard.css)

Include dashboard.css  into your main template file

Pages

  • Create header.xhtml  under your template folder
  • Create  leftMenu.xhtml  under your template folder
  • Create  content.xhtml under your template folder
  • Back to your main template file

Finally the templates  folder would look like this, assuming you template’s name is default:

 

Result

result

 

Change the size of the browser’s window to see if you have the responsive “running”, if so you would have something like this

 

 

resultResponsive

If the responsive is not working as expected, check if you have any errors in your console


3- Adding font-awesome

Font Awesome gives you scalable vector icons that can instantly be customised — size, color, drop shadow, and anything that can be done with the power of CSS.

Download Font Awesome, Once downloaded, unzip the compressed folder to see the structure. You’ll see something like this:

 

Copy font-awesome.css  to /webapp/resources/css  and copy fonts  folder to  /webapp/resources/

Our resources folder should look like this

 

Resolving Font-Awesome Fonts

Open  font-awesome.css  search for  @font-face , should look like this:

Now point to the locations of the fonts using  #{resource[]}

In your main template file include  font-awesome.css

To test font awesome add this to your welcome page, index.xhtml

See the available icons.

font-awesome-test

 

 

Last step is adding fonts mime types to web.xml  (to avoid warnings)

add the following to your  web.xml

 


Conclusion:

Bootstrap is a very nice and elegant front-end framework, especially for busy and non specialised front-end developers, you can find an online demo on the final result.
Also you can Fork or Download the project on Github.

github_login_icon

If you think something is wrong please feel free to comment :)
  1. CrYoSoRe says:

    Very good and usefull !

    Just one thing : You forgot to add font-awesome in the xhtml page :

    Reply
  2. Farisi says:

    I’d try, thanks for good tutorial.

    Reply
  3. Lars says:

    Thanks, Hatem, for help on getting started with JSF and Bootstrap. I noticed that the two ui:include elements somehow got misplaced outside of the body element.

    Reply
  4. Soekris says:

    fantastic tutorial, thanks!!

    Reply
  5. Amith says:

    great tutorial 😀 Thanks..

    Reply
  6. solo says:

    Nice tutorial. I integrated with primefaces and my app looks nice.however i didn’t find a way of showing my p:growl which appears hidden by the top bar.how can I do that please.

    Reply
  7. Eder says:

    Nice Tutorial.

    Thanks!!!

    Reply
  8. Gerald Scott says:

    Just wanted to add to the thanks of the others. Very good work.

    Reply
  9. Raj says:

    Nice work ! thanks for the tutorial

    Reply
  10. Sandeep says:

    Hi,

    Thanks for the tutorial. I have a question , looking at what Twitter Bootstrap can provide ( to JSF and HTML ) why do we need Primefaces? . Why does some one use Twitter Bootstrap and Prime Faces with JSF or HTML when Twitter Bootstrap can provide UI templates and styles ( examples : Admin LTE template for Dashboard bootstrap templates)

    Thanks..

    Reply
    • Hatem Alimam says:

      PrimeFaces provides an out of the box solution, the components are DRY, self-maintained, and conversion/validation etc.. are provided by simply defining attributes. Above all PrimeFaces is based on JSF whereas bootstrap is merely some CSS/JS hacks. In other words you can have a JSF/HTML/Bootstrap application but you would do so much work in order not to repeat your self by having some custom components and renderers.

      Reply
  11. tutor says:

    hi
    is there any support for responsive design with primefaces components?
    for example “p:autoComplete” create input field with action button
    is there any out of the box support or I have to do it by my own

    Reply
    • Hatem Alimam says:

      Recently PrimeFaces started to support responsive in some new components, but not all. You should understand the methodology behind responsive design, after all the components are see are HTML, CSS, and JS. Therefore the implementation of bootstrap or any other responsive framework should be straight forward, for example an input field should have a “form-control” as CSS class. Some more complicated components will require some custom CSS media or/and non media queries even JS might be a must in some cases. In my experience I didn’t take much time to adapt these components into the responsiveness world 🙂

      Reply
  12. thanks man, clean and right-to-the point

    Reply
  13. leftMenu.xhtml not displayed in the browser of the phone, why?

    Reply
  14. Modanez says:

    Hi,
    Thanks for the tutorial. I have a question, I have found problems with the components of the Primefaces, more specifically datagrid the icones of paginator are not shown on the screen, what could it be?

    Reply
  15. Dato Java says:

    Very usefull article. Thanks, one question, the theme of primefaces bootstrap is updated? Is very good that theme but i don’t know if is updated.

    Reply
  16. modanez says:

    Hello!
    I used your example, but now I don’t see the other icons of paging, editing or any other derived from ui-
    Would you have any idea what might be occurring?
    Thank you!

    Reply
  17. Yogi says:

    Hi ,
    Nice example .But if i want apply same css to custom component it is not working.
    Like Table, combo box,Multipal select etc.It is working fine for Label,Inputbox .Can you share some example with more primfaces components ,that will really help us.
    Thanks

    Reply
  18. Vincent says:

    Hi~ I try your method by step, and then it works.thanks,but there is small mistake :
    cant’ find the map file
    http://localhost:8080/primestrap/javax.faces.resource/bootstrap/css/bootstrap.css.map

    I’m study the boostrap,and want to try JSF2 with HTML5

    Reply
    • Hatem Alimam says:

      Search in bootstrap.css for “sourceMappingURL” and update it as the following /*# sourceMappingURL=#{resource['/css/bootstrap/css/bootstrap.css.map']} */

      Reply
  19. senthil says:

    Superb tutorial on bootstrap with Primefaces
    senthil

    Reply
  20. magg says:

    Thanks! Your Tutorial is excelent! Now I have my awesome bootstrap template with jsf.

    I´m using Primefaces and there are many conflicts with bootstrap and prime components.
    How can i mitigate or avoid these conflicts? any ideas? For example, bootstrap modal and tooltip don’t work even using no-conflicts() mode.
    And primefaces carousel don’t work. I have done many tests and editions to css and js and i don´t know how to eliminate conflicts. Thanks for your tutorial!!

    Reply
    • Hatem Alimam says:

      Besed my of assumptions the order or the place where you are placing the scripts is creating that unexpected behavior.
      Make sure that you load one jQuery. Since PrimeFaces loads its own. But again if you follow this post everything should be fine.

      Reply
  21. fatih says:

    Thanx for sample. I ask a question. In main template file is true ?

    I think true is :

    Reply
  22. andrew vw says:

    Mr Alimam,
    Very helpful. Thank you so much. Its posts like these that make the Internet a better place.
    xhtml is very unforgiving (obviously enough perhaps) —
    It looks like JSF (or at least the web.xml settings) treats even the css files as xhtml, It looks like even the bootstrap.css gets turned into bootstrap.css.xhtml .. Any minor missing bracket and you’re stuffed.
    Eventually I got this working by copying the bootstrap.css content directly from your demo site rather than using my own. (Someone else might find this useful).
    Thanks again

    Reply
  23. Dvarma says:

    I am regular visitor. This paragraph posted
    at this web site is in fact good.

    Reply
  24. reguez says:

    the prime faces component doesn’t show when i add it after the ui component

    unless i add a style like “position: absolute left: 100px;top: 150px;” .

    is there any solution to integrate primefaces ?

    Reply
  25. Kelvin says:

    I am new to web development and I am now setup. Thank you this is still useful in 2016. Got me quickly set up in 15 minutes, I had estimated a minimum of 5 hrs. Thank you again. keep up the good work.

    Reply

Trackbacks for this post

  1. bootstrap+ jsf | Mis notas
  2. Twitter Bootstrap Tutorials | Vegibit