I am currently working on creating a basic filter bar that includes a custom control element.
My intention is to align the element vertically, but so far, I have been unsuccessful. Below is the code for the filter bar:
<div class="bg-light p-3 card">
<form class="form-inline">
<div class="form-row">
<div class="col-auto">
<input type="text" placeholder="The team's name" class="form-control" value="" />
</div>
<div class="col-auto">
<select class="form-control">
<option value="">Select the season</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-secondary">
<i class="fas fa-search"/> Search</button>
</div>
<div class="col-auto">
<div class="custom-control custom-switch align-center">
<input type="checkbox" class="custom-control-input" id="vpx" checked="" />
<label class="custom-control-label" for="vpx">Hide 0-point teams</label>
</div>
</div>
</div>
</form>
</div>
However, the display is not as expected as you can see in the image below:
https://i.sstatic.net/DV5wY.png
Despite trying various align- classes, the element refuses to budge. I have even attempted setting the display property to inline-block as suggested in the Bootstrap documentation.
The only way I have managed to achieve some centering is by adding the mt-2 class, but I suspect this is not the ideal solution.