How to design control dropdown and check box in line next next to each other MVC 5 Bootstrap 4

Question

right now controls are like in this way,

 <div class="form-horizontal">
<div class="form-group ">
                    @Html.LabelFor(model => model.TribeId, @Resource.TribeName, htmlAttributes: new { @class = "control-label col-md-2" })
                    <div class="col-md-4">
                        @Html.DropDownList("TribeId", null, @Resource.SelectTribe, htmlAttributes: new { @class = "form-control" })
                        @Html.ValidationMessageFor(model => model.TribeId, "", new { @class = "text-danger" })
                    </div>
                    <div class="col-lef-1">
                        <input type="checkbox" id="chkTribe" name="" value="">
                        <label>@Resource.Skip</label>
                    </div>
                </div>
</div>

as shown in picture,

All dropdowns are like same way label and dropdown is ok but i want check box next to dropdown close to dropdown

Hopes for your suugestions

thanks

Answer 1

Use this: Make sure you use class row in your parent div so the children will be in one row inside a col-12. Use padding top to checkbox div if you have position issue of the checkbox. Hope it is what you wanted:

<div class='col-md-12 form-group row'>
    <div class="col-md-12"><label for="test">LABEL</label></div>
    <div class="col-md-3">
        <select name="test" class='form-control'>
            <option>1</option>
            <option>2</option>
        </select>
    </div>
    <div class="col-md-3">
        <input type="checkbox" id="chkTribe" name="" value="">
        <label>Checkbox</label>
    </div>
</div>