Using modified Bootstrap buttons as a Radio Group

I have a page in which users (mostly younger partially disabled children) are asked to pick one activity from a number of choices, based on their age and experience. This is done on a tablet on site, and is not available outside the organisations server.

The activities are titled in 3 levels, and at each level there will be between 4 and 7 activities.

Depending upon age/experience etc the use will have access to between 1 and 3 levels of activities

All the activities are named beginning with the level, so that all Basic choices are together, followed by all Intermediate then all Advanced.

To make things easier for them I have programmed the choice by replacing radio buttons with Bootstrap buttons, and enlarged the buttons by adding CSS to them.

However I am trying to ensure that all buttons for every level are in single row. (e.g. row of Basic level buttons, row of Intermediate etc.), and it is here I am having trouble. I know I can use the beginning part of the activity name to split them, but whatever I have tried (e.g putting each level in a separate

) causes the buttons in each row to behave like an individual radio group. Also depending upon whatever the number of “buttons” in the first group is it causes the buttons to be bigger or smaller.

The code to “load” the buttons is:

                                    $sel = "checked";
                                    $active = "active";
                                    $count = 0;
                                    $init_text = "xxxxxxx";
                                    echo '<div class="btn-toolbar btn-group-toggle row" data-toggle="buttons">';
                                    foreach ($activity as $aid => $aname) {
                                        $text = substr($aname, 0, 4);
                                        echo'<label class="btn btn-outline-success btn-space btn-big ' . $active . ' ">';
                                        echo'<input type="radio" name="activity" id="' . $aid . '" autocomplete="off"' . $sel . '>' . $aname . '</label>';
                                        $sel = "";
                                        $active = "";
                                    echo '</div>';

As you can see I have left in place the variables $init_text and $text which I had used to try to break the items into groups.

The CSS used to create the “big buttons”:

            .btn-space {
                margin-right: 5px;
                margin: 4px 2px;
            .btn-big {
                height: 100px;
                width: 13%;
                font-weight: 700;

            btn-success:not(.active):hover, .btn-big:not(.active):hover {
                background-color: #00ff7f !important;

Is what I am trying to acheive possible? If so I assume it is a CSS problem, and could any expert out there point me in the right direction?

As an aside all the buttons have the text centrally aligned at the top of the “big button”. Is it possible to get it centralised to the height as well?

Many thanks

Sponsor our Newsletter | Privacy Policy | Terms of Service