Doublure des étiquettes avec boutons radio dans Bootstrap 4

Question

J'essaie Bootstrap 4 formulaire dans lequel je voudrais aligner les boutons radio avec des étiquettes. Je l'ai travaillé avec bootstrap 3, mais je ne peux pas sembler travailler avec bootstrap 4 et son style radio personnalisé.

Desired Output: 
Gender : () Male ()Female 

Est-ce que quelqu'un peut me diriger dans la bonne direction? Ci-dessous est mon approche

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <form class="form-horizontal" method="post"> 
 
    <div class="row"> 
 
     <div class="form-group row col-lg-6"> 
 
     <label for="firstName" class="col-3 col-form-label">First Name</label> 
 
     <div class="col-9"> 
 
      <input type="text" class="form-control" /> 
 
     </div> 
 
     <div class="form-check row col-lg-6"> 
 
      <label class="col-3 col-form-label">Gender</label> 
 
      <div class="col-9"> 
 
      <label class="custom-control custom-radio"> 
 
       <input name="cat" type="radio" class="custom-control-input" value="1"> 
 
       <span class="custom-control-indicator"></span> 
 
       <span class="custom-control-description">Male</span> 
 
      </label> 
 
      <label class="custom-control custom-radio"> 
 
       <input id="mixed0" name="cat" type="radio" class="custom-control-input" value="0"> 
 
       <span class="custom-control-indicator"></span> 
 
       <span class="custom-control-description">Female</span> 
 
      </label> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div>

violon JS: https://jsfiddle.net/w7odmrtr/2/

Answer 1

D'abord, vous div n'a pas été fermé correctement et deuxième que je viens de classe avec form-check remplacé form-group un il semble maintenant travailler.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <form class="form-horizontal" method="post"> 
 
    <div class="row"> 
 
     <div class="form-group row col-lg-6"> 
 
     <label for="firstName" class="col-3 col-form-label">First Name</label> 
 
     <div class="col-9"> 
 
      <input type="text" class="form-control" /> 
 
     </div> 
 
     </div> 
 
     <div class="form-group row col-lg-6"> 
 
      <label class="col-3 col-form-label">Gender</label> 
 
      <div class="col-9"> 
 
      <label class="custom-control custom-radio"> 
 
       <input name="cat" type="radio" class="custom-control-input" value="1"> 
 
       <span class="custom-control-indicator"></span> 
 
       <span class="custom-control-description">Male</span> 
 
      </label> 
 
      <label class="custom-control custom-radio"> 
 
       <input id="mixed0" name="cat" type="radio" class="custom-control-input" value="0"> 
 
       <span class="custom-control-indicator"></span> 
 
       <span class="custom-control-description">Female</span> 
 
      </label> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div>

Answer 2

Je ferais comme ça:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
    <div class="container"> 
 
    <form class="form-horizontal" method="post"> 
 
     <div class="row"> 
 
      <div class="form-group col-lg-12"> 
 
      <label for="firstName" class="col-lg-3 col-form-label">First Name</label> 
 
      <div class="col-lg-9"> 
 
       <input type="text" class="form-control"> 
 
      </div> 
 
      </div> 
 
      <div class="form-group col-lg-12"> 
 
      <label class="custom-control custom-radio"><span class="custom-control-description">Some Label</span></label> 
 
      <label class="custom-control custom-radio"> 
 
       <input name="cat" type="radio" class="custom-control-input" value="1"> 
 
       <span class="custom-control-indicator"></span> 
 
       <span class="custom-control-description" th:text="#{bool.true}">Yes</span> 
 
      </label> 
 
      <label class="custom-control custom-radio"> 
 
       <input id="mixed0" name="cat" type="radio" class="custom-control-input" value="0"> 
 
       <span class="custom-control-indicator"></span> 
 
       <span class="custom-control-description">No</span> 
 
      </label> 
 
      </div> 
 
     </div> 
 
    </form> 
 
</div>