Menu
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?
482
A simple Bootstrap radio button example A group of three radio buttons is used that uses the radio class (by Bootstrap). The class is used in the div while input type radio is used inside the label tags.
Radio buttons are shown in radio groups to show a set of related options, only one of which can be selected. A radio button in HTML can be defined using the <input> tag.
To create a radio button in HTML, use the <input> element with the type radio. This creates a single radio button that users can interact with: HTML.
<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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
