Search code examples
htmlcsstwitter-bootstrapradio-buttonradio-group

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


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?


Solution

  • <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>