Question

I’m using Twitter Bootstrap.

The alert HTML code is:

<div class="alert alert-block">
  <a class="close" data-dismiss="alert" href="#">×</a>
  <h4 class="alert-heading">Warning!</h4>
  Best check yo self, you're not...
</div>

I’m using <h:messages /> to show my form error, info and warning messages like this:

<h:messages errorClass="alert alert-error" infoClass="alert alert-info" warnClass="alert alert-warning"/>

The colors and rounded corners are OK but I need to add the close link:

<a class="close" data-dismiss="alert" href="#">×</a>

How do I do that with <h:messages/>?

Edit

If a better understanding is required, here is the twitter bootstrap link to the alert style:
http://twitter.github.com/bootstrap/components.html#alerts

Answer 1

I guess the usual way you add messages …

FacesContext context = 
FacesContext.getCurrentInstance(); 
context.addMessage(null, new FacesMessage(your message goes here...  

the messages should be added from server side… e.g String myMessage = "here is the text / HTML code..."

Take a look at this article by BalusC

Using HTML in JSF messages