I'm experimenting with a Bootstrap 4 form and trying to get inline radio buttons with labels. It was working fine with Bootstrap 3, but I'm facing issues with Bootstrap 4 and its custom-radio styling.
Desired Output:
Gender : ( ) Male ( ) Female
Can someone guide me in the right direction? Here's my approach:
<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>JS Fiddle: https://jsfiddle.net/w7odmrtr/2/