With Bootstrap, how do I show radio inputs as buttons?

Question

My form currently contains this code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<label for="opt-0"><input type="radio" name="opt" id="opt-0" checked>Option 0</label>
<label for="opt-1"><input type="radio" name="opt" id="opt-1">Option 1</label>
<label for="opt-2"><input type="radio" name="opt" id="opt-2">Option 2</label>

Instead of showing the radio buttons as radio buttons, I'd like to make them look like regular buttons, like this:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-primary">Option 0</button>
<button class="btn btn-default">Option 1</button>
<button class="btn btn-default">Option 2</button>

I have radios and I want to make them look like toggleable buttons. How am I supposed to do that with Bootstrap?

score 76 · Accepted Answer · edited Mar 14 '19 at 20:21

76

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>    
<div class="btn-group" data-toggle="buttons">
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option1"> Option 1
      </label>
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option2"> Option 2
      </label>
      <label class="btn btn-primary">
        <input type="radio" name="options" id="option3"> Option 3
      </label>
</div>

edited Mar 14 '19 at 20:21

Rafael Herscovici

16,558
19
65
93

answered Jan 07 '16 at 15:58

Shibu Thomas

3,148
2
24
26

1

This save my day!!!! - replace the old – gonatee Feb 24 '17 at 15:53
@Shibu Thomas, Is it possible to show dropdown sub menu in bootstrap 3? – Deepak Keynes Jun 19 '17 at 06:19
@Keynes You can refer this https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp – Shibu Thomas Jun 20 '17 at 09:30
7

@ShibuThomas - thanks, it looks nice. In this implementation there's no indication on the selected option. Do you know how to add it? – Avision Aug 04 '17 at 11:30
How can we make an option look selected when the form loads? You can do checked="true" - but there's no visual indication it's selected?! – niico Nov 23 '17 at 03:09
@Avision Add the 'active' class to the label of the button you want to be selected – ElliotSchmelliot Mar 14 '18 at 17:16
I find the glow around the selected button not visible enough. Has anybody seen an elegant way of solving this? – elachell Mar 28 '18 at 20:59
But this is not ARIA compliant – Manu Mohan Dec 11 '20 at 17:21

score 38 · Answer 2 · edited Jun 04 '20 at 23:40

38

Bootstrap 4 now offers a toggleable button group that manages the active state for you on click.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>    
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-outline-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Active
  </label>
  <label class="btn btn-outline-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio
  </label>
  <label class="btn btn-outline-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio
  </label>
</div>

edited Jun 04 '20 at 23:40

Cullub

2,901
3
30
47

answered Mar 14 '18 at 17:39

ElliotSchmelliot

7,322
4
41
64

Did you try to use bootstrap validation on grouped buttons ? : ```
Example invalid custom file feedback
``` I'm not able to display the error message, on submit, when the input is required. I think because of the wrapped input in label tag. Otherwise, an idea about that ? – javaxiss Aug 12 '19 at 09:32
People trying to use this with a vue.js v-model, `data-toggle="buttons"` breaks the binding for me. – Linuslabo Mar 10 '20 at 13:54
This is the best answer. I set the label class to `btn btn-outline-primary` and that works super well. – Cullub Jun 04 '20 at 23:32

score 5 · Answer 3 · answered Jan 07 '16 at 16:08

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked> Checkbox 1 (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>

jsfiddle-link
getbootstrap

score 1 · Answer 4 · answered Jan 07 '16 at 15:57

1

You could try looking at button groups, this is a goup of - well- buttons... which is toggleable like a radiobutton.

JSFiddle

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/js/bootstrap.min.js"></script>

<div class="btn-group" role="group" aria-label="...">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

Hope this helps!

answered Jan 07 '16 at 15:57

Mike Donkers

3,589
2
21
34

This could work, but: 1. if I click on a button, it does not remain selected; 2. there are no `` elements and I can't submit the form – Likk Jan 07 '16 at 16:07
Looked good, until I tried it. The buttons do not stay "toggled", so not what the OP (or me) wants – Greg Woods Feb 04 '19 at 19:52

With Bootstrap, how do I show radio inputs as buttons?

4 Answers4