Create a form using Bootstrap 4 that looks like the forms in Bootstrap 3 - css

Question

I would like to create a form using BootStrap 4 that looks like the forms that BootStrap 3 allowed one to create easily. i.e. I would like a bold label right-aligned within a specific size (e.g. col-sm-4), and next to it I would like an input field whose width is controlled by an enclosing div tag with a class like col-sm-4 (as an example). How can I do this? I have spent an hour or so now battling with .css and BS4 to create this, but have been unable to achieve the effect I desire. Any hints would be great.
The code below will produce the effect I wish for but will not allow me to have different sized inputs (they all default to the same size)
css:
div.form-inline label.col-sm-3 {
justify-content: flex-end;
font-weight:650;
}
html:
<div class="form-inline">
<label for="INcity" class="col-form-label col-12 col-sm-3">City</label>
<div class="col-sm-4"><input type="text" name="INcity" class="required form-control" id="INcity"></div>
</div>
If I instead use form-group, then I can alter the size of the input fields using the enclosing tags, but then the css (even when I change it to be .form-group instead of .form-inline) fails to align the label correctly and set it to bold. So I guess I'm looking for either the correct .css or an example of how to achieve the whole effect simply (as it was with BS3). I must be missing something obvious because I can not believe that the BS4 developers would make it so difficult to achieve the same look as BS3 allowed without any of the .css hacks etc that I am having to do. Though I do notice that every one of the examples given in the BS4 documentation has the label left-aligned, so perhaps they have decided to make that formatting decision for every BS4 user, but that seems a bit unlikely (and unfriendly).

Answer 1

In order for col-* to work they MUST be inside a .row or .form-row.
There's no need for any extra CSS:
https://codeply.com/go/0Vkxbmgb4c
<div class="form-row">
<label for="INcity" class="col-form-label col-12 col-sm-3 font-weight-bold text-right">City</label>
<div class="col-sm-4">
<input type="text" name="INcity" class="required form-control" id="INcity">
</div>
</div>
https://getbootstrap.com/docs/4.0/components/forms/#form-grid

Answer 2

If you have several of these that you are converting from BS3 to BS 4, then the way that ZimSystem has suggested as an answer will be extremely tiresome to implement - being as you will have to change every single instance of this. Just create some css (as it seemed you were actually asking for) with the following .css and use find and replace to replace every instance of control-label with col-form-label. This approach is much easier than the approach suggested above, and uses a more modular approach (in that you only have to write the css markup once - modularity should be every programmer's approach in my opinion). Ensure this css is loaded AFTER BS4 css has loaded.
.col-form-label
{
font-weight:600;
text-align:right;
}