While using Bootstrap 4, I encountered an issue with aligning the save button in a form group because there was no label at the same level. Despite trying to follow an example from here, I still had to hard code margin-top to prevent the button from being aligned to the bottom. Is there a way to achieve this alignment using pure Bootstrap without any overrides?
<form method="POST" enctype="multipart/form-data" class="form-horizontal">
<div class="form-group row">
<div class="col-md-4">
<input class="form-control" type="text" placeholder="Search by Unit" />
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-primary"><i class="fa fa-fw fa-search"></i>Search</button>
</div>
</div>
</form>
<form method="POST" enctype="multipart/form-data" class="form-horizontal">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="zones">Zones</label>
<select class="form-control" id="zones">
<option>Zone1</option>
<option>Zone2</option>
</select>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="unitname">Unit Name</label>
<input class="form-control" type="text" id="unitname" placeholder="Enter the Unit Name" />
</div>
</div>
<div class="col-md-3">
<button type="submit" class="btn btn-primary"><i
class="fa fa-fw fa-save"></i>Save</button>
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<table class="table table-stripped">
<thead>
<tr>
<th>#</th>
<th>Zone Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let zone of zones|async">
<td>{{zone.zoneId}}</td>
<td>{{zone.zoneName}}</td>
<td>{{zone.status}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</form>