While we're developing our component using Protostar, we have found that the btn-group and btn-group-yesno classes are not "native" per se, in that they're not necessarily supported in other templates such as Rockettheme/Gantry.

The classes are found in Bootstrap, but the RT template seems to override them somehow rendering some useless HTML where the button group is expected to appear.

Is there a way to include the Bootstrap css/logic in the component (without forcing any template overrides), in spite of what the templates might be doing? I'd like to insure that those classes are available and working without special instructions for a particular template.

2 Answers 2


The btn-group-yesno class from what I've seem simply has very minor styling differences.

If you're looking for the same logic (left green and red right), but not dimensions as the btn-group-yesno button group, then what you can do is use integers for your option values.

For example:

<field name="test" type="radio" default="1" class="btn-group">
    <option value="1">JYES</option>
    <option value="0">JNO</option>

This however will output the same, but will only use the green active state:

<field name="test" type="radio" default="1" class="btn-group">
    <option value="yes">JYES</option>
    <option value="no">JNO</option>

I might have completely misunderstood your question, but if not, then hope the above helps

  • This is the expected behavior that we were planning on, but didn't work on the RT templates. Their suggestion was to copy their CSS/LESS files to the component and have it there in the event of a non-RT template, but the suggestion did not work, thus my discovery of the JS. Perhaps my JS solution is RT/Gantry specific
    – GDP
    Nov 24, 2014 at 16:26

Not sure that this is the best-practice answer, but here's the simple change I made to have btn-group/btn-groupyesno supported in a Rockettheme template, though apparently has no effect with the Beez template:

From protostar\js\template.js, I copied/pasted the below code into the javascript that is being loaded for all my forms. No CSS change was apparently needed, presumably because this code engaged the styles from the bootstrap.css that was installed with joomla

(function($) {
    $(document).ready(function() {
        // Turn radios into btn-group
        $('.radio.btn-group label').addClass('btn');
        $(".btn-group label:not(.active)").click(function()
                var label = $(this);
                var input = $('#' + label.attr('for'));

                if (!input.prop('checked')) {
                    label.closest('.btn-group').find("label").removeClass('active btn-success btn-danger btn-primary');
                    if (input.val() == '') {
                        label.addClass('active btn-primary');
                    } else if (input.val() == 0) {
                        label.addClass('active btn-danger');
                    } else {
                        label.addClass('active btn-success');
                    input.prop('checked', true);
        $(".btn-group input[checked=checked]").each(function()
                if ($(this).val() == '') {
                    $("label[for=" + $(this).attr('id') + "]").addClass('active btn-primary');
                } else if ($(this).val() == 0) {
                    $("label[for=" + $(this).attr('id') + "]").addClass('active btn-danger');
                } else {
                    $("label[for=" + $(this).attr('id') + "]").addClass('active btn-success');
  • 1
    Reason why it's not working on Beez3 is because you need to go to the template parameters and add your component to the Components Requiring Bootstrap option, else the Bootstrap CSS file won't be loaded. You can't expect users to do this though so you could simply import it using JHtml::_('bootstrap.loadCss');
    – Lodder
    Nov 24, 2014 at 18:38
  • 1
    I'm holding on sending flowers...it's going to be cheaper if I reach a volume purchase level
    – GDP
    Nov 24, 2014 at 18:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.