ron tornambe ron tornambe - 5 months ago 42
CSS Question

How do I get a label and radio buttons inline with bootstrap?

I know this should be simple, but the solution eludes me. My test-site illustrates my frustration.

<div class="form-group row">
<label for="choose-type" class="col-sm-2 form-control-label label-inline">Account Type</label>
<div id="choose-type" class="col-sm-10 div-inline">
<label class="radio-inline">
<input type="radio" class="radio-inline" name="user-type" id="writer" value="1" required > Writer
</label>
<label class="radio-inline">
<input type="radio" class="radio-inline" name="user-type" id="enabler" value="2" required> Enabler
</label>
</div>
</div>

Answer

Please try this. You have padding in the divs which is throwing your bootstrap layout off (col-sm-10 and col-sm-2 don't have enough space). I have changed col-sm-10 to col-sm-8 to accommodate.

<div class="form-group row">
    <label for="choose-type" class="col-sm-2 form-control-label label-inline">Account Type</label>
    <div id="choose-type" class="col-sm-8 div-inline">
        <label class="radio-inline">
            <input type="radio" class="radio-inline" name="user-type" id="writer" value="1" required=""> Writer
        </label>
        <label class="radio-inline">
            <input type="radio" class="radio-inline" name="user-type" id="enabler" value="2" required=""> Enabler
        </label>
    </div>
</div>
Comments