CODEWITHSUNDEEP
bootstrap-4
tom
tom

Reputation: 2357

Show Bootstrap radio inputs as buttons, but not as a button group

Bootstrap can give <input type="radio"s a button look (see here) but it seems that this works properly only if they are put into a button group.

I'm going to have many of them so to have them wrapping nicely with the page, I removed their <div class="btn-group" data-toggle="buttons"> container, but this way the look is degraded: The radio knob is shown and the buttons don't preserve their toggled look. (see here)

Do you know any workaround to have the radios displayed nicely as buttons without the need of having them as a button group?

Upvotes: 1

Views: 4168

Answers (1)

dferenc
dferenc

Reputation: 8126

Apparently the markup below will do the trick. The actual trick is to still wrap the .btns with a <div data-toggle="buttons">, but not setting the .btn-group class on it. The data-toggle="buttons" attribute will still provide the functionality, and the visual representation will be that of individual buttons.
A fiddle with more radio options is available too.

<div data-toggle="buttons">
    <label class="btn btn-secondary">
        <input type="radio" name="options" id="option1" autocomplete="off"> Radio 1
    </label>
    <label class="btn btn-secondary">
        <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
    </label>
    <label class="btn btn-secondary">
        <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
    </label>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>

Upvotes: 4

Related Questions