Show Lebel and CheckBox on the same line inside my asp.net mvc core web application

Question

I have the following inside my asp.net mvc web application:-

 @Html.CheckBox("@Model.SubmissionQuestionSubmission[i].Answer", new { @class = "form-control" })  <label>@Model.SubmissionQuestion[i].Question</label>

currently the checkbox and the label will be shown on 2 separate lines, so can i force them to show on the same line?

here is the markup generated from the above:-

<input class="form-control" id="zModel_SubmissionQuestionSubmission_i__Answer" name="@Model.SubmissionQuestionSubmission[i].Answer" type="checkbox" value="true">
<label>Are you currently participating ?</label>

Answer 1

According to your description, I suggest you could try to use bootstrap's form-check instead of the form-control .

More details, you could refer to below codes:

<div class="form-check">

    @Html.CheckBox("@Model.SubmissionQuestionSubmission[i].Answer", new { @class = "form-check-input" })  <label class="form-check-label">@Model.SubmissionQuestionSubmission[i].Question</label>

</div>

Result: