CODEWITHSUNDEEP
htmltwitter-bootstrapradio-button
Piya
Piya

Reputation: 1144

Bootstrap radio button not shown

I used the below html for radio button in bootstrap

<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's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>

Apart from label,no radio button is shown..

even <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">

doesnt show a radio button.What can be the issue

Upvotes: 1

Views: 7937

Answers (3)

Martin Zeitler
Martin Zeitler

Reputation: 76849

With Bootstrap 4 it was class .custom-control-input and position: absolute:

.custom-control-input {
    position: absolute;
    left: 0;
    z-index: -1;
    width: 1rem;
    height: 1.22rem;
    opacity: 0;
}

This might help to get it displayed:

input[type="radio"] {
    display: block;
    position: relative;
    opacity: 1.0;
}

Upvotes: 0

pavan kumar
pavan kumar

Reputation: 144

If your radio buttons are not showing, chances are the opacity may set to '0'. so you can use below CSS code.

  input[type="radio"] {
  opacity: 1;
 }

Upvotes: 0

PHIN
PHIN

Reputation: 231

If your radio buttons are not showing, chances are somewhere in your css you have the following code:

input[type="radio"] {
    display:none;
}

The display: none; bit is what is making your radio buttons invisible.

Upvotes: 3

Related Questions