CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
CalumMcCall
CalumMcCall

Reputation: 1687

Bootstrap checkbox buttons not displaying correctly

I'm trying to use the checkbox button functionality described on the bootstrap page here under the subsection "checkbox". I copy pasted the html(shown below) from that page into a jsfiddle and checkboxes suddenly appear inside the buttons. How can I get rid of them? I couldn't find any mention of this issue on the Bootstrap site or using Google.

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary">
        <input type="checkbox">Option 1</label>
    <label class="btn btn-primary">
        <input type="checkbox">Option 2</label>
    <label class="btn btn-primary">
        <input type="checkbox">Option 3</label>
</div>

EDIT: I found that calling .hide() on the input checkbox elements hides the checkbox and the checkboxes then look just like buttons as in Bootstrap 3.

Upvotes: 0

Views: 8151

Answers (2)

xitas
xitas

Reputation: 1164

try this code for check boxes: 

<div>
  <label class="col-md-4">
    <input type="checkbox"> Option 1
  </label>
  <label class="col-md-4">
    <input type="checkbox"> Option 2
  </label>
  <label class="col-md-4">
    <input type="checkbox"> Option 3
  </label>
</div>

It is done in http://jsfiddle.net/g3mu8/307/.

and and button here:

<div class="btn-group">
  <button type="button" class="btn btn-primary" data-toggle="button">option1</button>
  <button type="button" class="btn btn-primary" data-toggle="button">option2</button>
  <button type="button" class="btn btn-primary" data-toggle="button">option3</button>
</div>

done here http://jsfiddle.net/g3mu8/308/

Upvotes: 1

rorofromfrance
rorofromfrance

Reputation: 1904

In your JSFIDDLE you're are using Bootstrap v2.0.4 .. that Boostrap doc site uses the newer Bootstrap v3.1.1

Check which version you have loaded in your development environment

For Boostrap 2.x.x you would need to do

<div class="btn-group" data-toggle="buttons-radio">
    <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>

http://getbootstrap.com/2.3.2/javascript.html#buttons

Upvotes: 2

Related Questions