Radio Download Button: remove the radio button

Question

I am trying to use Bootstrap for my site. I have switches, and I'm trying to use the Buttons from the bootstrap for the same.

<td style="margin-bottom:0px; padding-bottom: 0px;font-size=12px;vertical-align:bottom;"> <div class="btn-group" data-toggle="buttons" id="topButtonDiv" > <button type="button" class="btn btn-primary">Home <input type="radio" id="radio1" ></button> <button type="button" class="btn btn-primary">Home1 <input type="radio" id="radio2" > </button> <button type="button" class="btn btn-primary">Home2 <input type="radio" id="radio7"> </button> </div> </td> 

The problem I am facing is that I still see circles in the Radio button, where, like in the Bootstrap example, I don't see such circles.

http://getbootstrap.com/javascript/#buttons-usage

Can you tell me what I am missing here?

Answer 1

Check out the css version you added. The same btn-group class works fine here

Answer 2

Another alternative if updating the css version does not work is to manually hide the switch with css

 [type='radio'] { display: none; } 

Answer 3

Your markup for bootstrap switches is incorrect, you do it like this:

 <div class="radio"> <label> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> Option one is this and that&mdash;be sure to include why it great </label> </div> 

In addition, you cannot put an input element in a button element. This is invalid html.