Bootstrap 4 column vertical padding when breaking - css

Question

I got a form-group that I've customized for large and small displays. The markup is as follows:
<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 works pretty well, when the display is wide it shows all content on one line making up 12 columns, and when smaller it breaks it up into two lines.
However, the two lines are packed tight together, and doesn't have the nice spacing the rest of the form groups have.
Any css class I'm missing?
-- 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>

Answer 1

You can make use of the margin and padding classes.
.my-2.my-sm-0 // would add a vertical margin on xs devices