Radio buttons does not show checked state when styled with Bootstrap

Question

When I just use a plain group of radio buttons with Bootstrap like this with no special styling then it works just fine:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="radio">

        <div class="form-group">
            <label><input type="radio" value="keep">Ändra inte lösenordet</label>
        </div>
        <div class="form-group">
            <label><input type="radio" value="auto">Generera ett nytt lösenord automatiskt</label>
        </div>
        <div class="form-group">
            <label><input type="radio" value="manual">Ange ett nytt lösenord manuellt</label>
        </div>
        <div class="form-group">
            <input type="text" class="form-control" class="custom-control-input" name="password" id="password" placeholder="Ange ett lösenord manuellt">
        </div>
                   
    </div>
    
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

The radio buttons are showing the checked state when clicked upon. But if I try to style the buttons using the custom-control CSS class like this:

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <div class="radio custom-control custom-radio">

        <div class="form-group">
            <label class="custom-control-label"><input type="radio" class="custom-control-input" value="keep">Ändra inte lösenordet</label>
        </div>
        <div class="form-group">
            <label class="custom-control-label"><input type="radio" class="custom-control-input" value="auto">Generera ett nytt lösenord automatiskt</label>
        </div>
        <div class="form-group">
            <label class="custom-control-label"><input type="radio" class="custom-control-input" value="manual">Ange ett nytt lösenord manuellt</label>
        </div>
        <div class="form-group">
            <input type="text" class="form-control" class="custom-control-input" name="password" id="password" placeholder="Ange ett lösenord manuellt">
        </div>
                       
    </div>
    
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

... it does not work. Nothing happens when I click on the buttons. How can I fix this?

Answer 1

Custom radio (and checkbox, too) button solutions depend on a specific DOM structure regarding label and input where the input needs to come before the label, with the label being a sibling (most often realized with the expectation of the label being an adjacent sibling). This is due to limitations of CSS.

That means your labels are no longer associated with the radio button because it's no longer wrapping it. To fix that, give the radio buttons an id and add the for="" attribute on the label containing that same id).

Also, your radio buttons need to share a common name, otherwise all radio buttons can be checked at the same time.

So to fix it, make changes according to that:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="radio custom-control custom-radio">

  <div class="form-group">
    <input type="radio" class="custom-control-input" name="i" value="keep" id="i1" />
    <label class="custom-control-label" for="i1">Ändra inte lösenordet</label>
  </div>
  <div class="form-group">
    <input type="radio" class="custom-control-input" value="auto" name="i" id="i2" />
    <label class="custom-control-label" for="i2">Generera ett nytt lösenord automatiskt</label>
  </div>
  <div class="form-group">
    <input type="radio" class="custom-control-input" name="i" value="manual" id="i3" />
    <label class="custom-control-label" for="i3">Ange ett nytt lösenord manuellt</label>
  </div>
  <div class="form-group">
    <input type="text" class="form-control" class="custom-control-input" name="password" id="password" placeholder="Ange ett lösenord manuellt">
  </div>

</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Answer 2

Working now. You just needed to add a id="customRadio" in your input and in your labels a for="customRadio".

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


    <div class="radio custom-control custom-radio">

        <div class="form-group">
<input type="radio" class="custom-control-input" id="customRadio"><label class="custom-control-label" for="customRadio">Ändra inte lösenordet</label>
     </div>
     
        <div class="form-group">
            <input type="radio" id="customRadio1" class="custom-control-input" value="auto"><label class="custom-control-label" for="customRadio1">Generera ett nytt lösenord automatiskt</label>
        </div>
        
        <div class="form-group">
           <input type="radio" id="customRadio2" class="custom-control-input" value="manual" > <label class="custom-control-label" for="customRadio2">Ange ett nytt lösenord manuellt</label>
        </div>
        

        <div class="form-group">
            <input type="text" class="form-control" class="custom-control-input" name="password" id="password" placeholder="Ange ett lösenord manuellt">
        </div>
        
            
    </div>