Check out this sample jsFiddle I created, using the html directly from my website. The css for bootstrap 4 is included, which I compiled using sass in addition to my custom css.
Everything seems to align perfectly on all screen sizes, except for small displays. On smaller screens, the input boxes and buttons extend all the way to the edge, while the labels, headers, text, and tabs remain within the tab-content box.
Here is the link to the jsFiddle example:
https://jsfiddle.net/Gillardo/y3Lr9sbf/1/
Why is this happening? Have I structured something incorrectly, or could it be a bug with bootstrap 4 at the moment? I'm turning to this platform for help because when comparing my layout to the bs4 examples, everything looks fine. You can find the bs4 examples here:
Here's an example of how I structure my form using form-group:
<div class="row form-group">
<label class="col-sm-3 form-control-label">Label</label>
<div class="col-sm-9 col-md-7">
<input class="form-control form-control-lg ng-pristine ng-untouched ng-valid" disabled="disabled">
</div>
</div>