My intention was for it to be displayed like this:
But unfortunately, it is appearing like this instead:
You can see that the word "fruit" is misaligned.
I am currently using Bootstrap 4 alpha v6. Here is the code snippet:
<fieldset class="form-group row">
<div class="col-sm-3"><legend class="col-form-legend">Fruit</legend></div>
<div class="offset-sm-3 col-sm-9">
<div class="form-check row">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="legendradio" id="legendradio1" value="1"gt;Apple
</label>
</div>
<div class="form-check row">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="legendradio" id="legendradio2" value="2">Orange
</label>
</div>
<div class="form-check row">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="legendradio" id="legendradio3" value="1">Watermelon
</label>
</div>
</div>
</fieldset>