The Bootstrap grid layout has 12 columns:
Grid system · Bootstrap v4.5[
^]
You have specified that you want the label to take up 2 columns, and each of the checkboxes to take up 2 columns. That means all three will fit on a single row, taking up half the width of the container.
You'll also want to use the correct Bootstrap markup for your checkboxes:
Forms · Bootstrap v4.5[
^]
Try something like this:
<div class="form-group row">
<label class="col-sm-2 col-form-label">Dietary requirements:</label>
<div class="col-sm">
<div class="form-check">
@Html.CheckBoxFor(m => m.DietMain.None, new { @class = "form-check-input" })
<label class="form-check-label" for="@Html.IdFor(m => m.DietMain.None)">None</label>
</div>
<div class="form-check">
@Html.CheckBoxFor(m => m.DietMain.Halaal, new { @class = "form-check-input" })
<label class="form-check-label" for="@Html.IdFor(m => m.DietMain.Halaal)">None</label>
</div>
</div>
</div>
NB: Based on the provided options, they appear to be exclusive - it wouldn't make sense to select both "none" and "halaal". If the user can only select one option, it would make more sense to use a radio-button list instead.