Fixing JSF Radio Button layout when using Twitter Bootstrap

Twitter Bootstrap adds ‘display:block’ to labels by default, which oddly affects the way radio buttons are displayed if renderd using JSF – the label drops down to the next line.

To work around this, add a class using styleClass to the <h:selectOneRadio> tag, and then use some additional CSS to set display back to ‘inline’ for labels within an element using the class you used on the selectOneRadio tag.

Here’s some example CSS:

.inlineRadioButtons {

.inlineRadioButtons label {
    display: inline;

And here’s it used on some JSF generating radio buttons:

    <h:panelGrid columns="2">
    <h:outputText value="Color:" />
    <h:selectOneRadio value="#{testBean.selectedColor}"
        <f:selectItems value="#{testBean.colors}" var="#{item}"
            itemValue="#{item}" itemLabel="#{item.desc}"></f:selectItems>
    <h:commandButton action="#{}" value="Save" styleClass="btn btn-primary"/>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.