Is there a way to create a form using BootStrap 4 that resembles the easily customizable forms from BootStrap 3? I am looking to have a bold, right-aligned label within a specific column size (e.g. col-sm-4), with an input field next to it whose width is controlled by an enclosing div tag with a class like col-sm-4. I have been struggling with .css and BS4 for some time now trying to achieve this desired effect. Any suggestions or hints would be greatly appreciated.
The following code somewhat achieves the desired effect but does not allow for different sized inputs as 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 use form-group instead, I can change the sizes of the input fields using the enclosing tags. However, the css (even when changed to .form-group instead of .form-inline) fails to align the label correctly and apply the bold styling. It seems like I need the correct .css or a simple example of achieving the desired effect without any hacks required. Perhaps I am missing something obvious since achieving the same look as in BS3 has proven quite difficult. The BS4 documentation examples all show left-aligned labels, which makes me wonder if BS4 developers made a universal formatting decision for all users, though that seems unlikely and unwelcoming.