With the following bootstrap 4.6 markup:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="card mt-3">
<div class="card-header">
<h4 class="card-title">Create new cron
<button class="btn btn-outline-secondary fk-reload">Refresh</button>
</h4>
</div>
<div class="card-body">
<div class="form-group">
<div class="form-row">
<div class="col">
<label for="fk-cron-name">Name</label>
<input type="text" class="form-control" id="fk-cron-name" name="cron_name" placeholder="My Cron" title="Enter the unique name for your new cron"/>
</div>
<div class="col">
<label for="fk-cron-spec">Spec</label>
<input type="text" class="form-control" id="fk-cron-spec" name="cron_spec" placeholder="*/5 1,2,3 * * *" title="Enter the the spec of your new cron"/>
</div>
<div class="col">
<label for="fk-submit-cron">Actions</label>
<button type="button" class="btn btn-primary" id="fk-submit-cron">
Create
</button>
</div>
</div>
</div>
</div>
</div>
</div>I expect a row style form where two text inputs are followed by a button, with each form element described by a label directly above it. If I squeeze the width of the form (by resizing the browser window) it all lines up perfectly as I expect it, but given full width, the label above the button sneaks down in front and breaks the whole layout.
What am I doing wrong? How can I fix this in the bootstista way?