Bootstrap Buttons Radio Button Showing Inside Columns

Question

Implementing Bootstrap Buttons.

When you place each label inside a div, the radio button appears. Remove the div and the radio buttons do not appear. How to implement inside div and hide the radio button? We want inside a div only so we can use cols.

            <div class="btn-group" data-toggle="buttons">
                <!--Shows radio button-->
                <div>
                    <label class="btn btn-primary active">
                        <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
                    </label>
                </div>
                <!--Doesn't show radio button-->
                <label class="btn btn-primary">
                    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
                </label>
                <!--Doesn't show radio button-->
                <label class="btn btn-primary">
                    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
                </label>
            </div>

Answer 1

You just need to apply a display: none style to the input elements.

The bootstrap css rule only applies to

[data-toggle="buttons"] > .btn > input[type="radio"], [data-toggle="buttons"] > .btn > input[type="checkbox"]

So by adding a div you are disrupting that selection.

You can create your own class or inline style display: none on the input elements.