title: Add HTML to <h:messages />
body: <p>I'm using Twitter Bootstrap.</p>
  
  <p>The alert HTML code is:</p>
  
  <pre><code>&lt;div class="alert alert-block"&gt;
    &lt;a class="close" data-dismiss="alert" href="#"&gt;×&lt;/a&gt;
    &lt;h4 class="alert-heading"&gt;Warning!&lt;/h4&gt;
    Best check yo self, you're not...
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm using <code>&lt;h:messages /&gt;</code> to show my form error, info and warning messages like this:</p>
  
  <pre><code>&lt;h:messages errorClass="alert alert-error" infoClass="alert alert-info" warnClass="alert alert-warning"/&gt;
  </code></pre>
  
  <p>The colors and rounded corners are OK but I need to add the close link:</p>
  
  <pre><code>&lt;a class="close" data-dismiss="alert" href="#"&gt;×&lt;/a&gt;
  </code></pre>
  
  <p>How do I do that with <code>&lt;h:messages/&gt;</code>?</p>
  
  <p><strong>Edit</strong></p>
  
  <p>If a better understanding is required, here is the twitter bootstrap link to the alert style:
  <a href="http://twitter.github.com/bootstrap/components.html#alerts" rel="nofollow">http://twitter.github.com/bootstrap/components.html#alerts</a></p>