Asp.net Mvc: Align Checkbox And Label On Same Line

The label ('Acid-stable amino acids') and checkbox are on different lines in my ASP.NET Core MVC application. (Sample ID is irrelevant here.) I would like them to be on the same li

Solution 1:

you can apply css like

.checkbox.control-label{
   float:left;
   width:40%;
}
.checkboxinput[type="checkbox"]{
   float:left;
   width:60%;
}
.checkbox:after{
   content:'';
   display:block;
   clear:both;
}

Solution 2:

From Bootstrap v4.0 and higher you can use:

<divclass="form-group form-check"><labelasp-for="AcidStables"class="form-check-label"></label><inputasp-for="AcidStables"class="form-check-input"/><spanasp-validation-for="AcidStables"class="text-danger"></span></div>

This is a cleaner solution if you're already using Bootstrap, because you don't need to write additional CSS.

Note: The 'form-group' class is optional, but it gives nicer spacing if used in a form.