I created a customized form-group to accommodate both large and small screens. The structure looks like this:
<div class="form-group row">
@Html.LabelFor(model => model.ValidFrom, "Valid from", htmlAttributes: new { @class = "col-lg-3 col-sm-3 col-form-label" })
<div class="col-lg-4 col-sm-9">
@Html.EditorFor(model => model.ValidFrom, new { htmlAttributes = new { @class = "form-control", type = "date" } })
</div>
@Html.LabelFor(model => model.ValidTo, "to", htmlAttributes: new { @class = "col-lg-1 col-sm-3 col-form-label" })
<div class="col-lg-4 col-sm-9">
@Html.EditorFor(model => model.ValidTo, new { htmlAttributes = new { @class = "form-control", type = "date" } })
</div>
</div>
It functions well, displaying content in a single line of 12 columns on wide screens and breaking into two lines on smaller screens.
However, on the smaller screens, the two lines are closely packed without the desired spacing seen in other form groups.
Is there a CSS class that I might be overlooking?
-- EDIT --
HTML:
<div class="form-group row">
<label class="col-lg-3 col-3 col-form-label" for="MvaMapping_b3c825b7-e5fc-4812-8339-baae0a7ac16a__ValidFrom">Valid from</label>
<div class="col-lg-4 col-9">
<input class="form-control text-box single-line" data-val="true" data-val-date="The field ValidFrom must be a date." id="MvaMapping_b3c825b7-e5fc-4812-8339-baae0a7ac16a__ValidFrom" name="Triggers[39a5c999-81dc-46bf-80f0-b6450f2821b7].Actions[9207165e-9c24-4928-a2ff-503a7f9779dd].MvaMapping[b3c825b7-e5fc-4812-8339-baae0a7ac16a].ValidFrom" type="date" value="">
</div>
<label class="col-lg-1 col-3 col-form-label" for="MvaMapping_b3c825b7-e5fc-4812-8339-baae0a7ac16a__ValidTo">to</label>
<div class="col-lg-4 col-9">
<input class="form-control text-box single-line" data-val="true" data-val-date="The field ValidTo must be a date." id="MvaMapping_b3c825b7-e5fc-4812-8339-baae0a7ac16a__ValidTo" name="Triggers[39a5c999-81dc-46bf-80f0-b6450f2821b7].Actions[9207165e-9c24-4928-a2ff-503a7f9779dd].MvaMapping[b3c825b7-e5fc-4812-8339-baae0a7ac16a].ValidTo" type="date" value="">
</div>
</div>