Bootstrap Radio button : radio circle removal

Question

I am trying to use Bootstrap for my website. I have radio buttons and I am trying to use "Buttons" from 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 the circles in the Radio button present, where as in the Bootstrap example, I see no such circles present.

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

Can you let me know what I am missing here?

Answer 1

Another alternative if the css version update is not working is to manually hide the radio button using css

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