This is the form structure I am working with:
<form method="GET" action=".">
<div class="container-fluid pt-2 px-5 py-3">
<div class="row g-4">
<div class="col-sm-12 col-xl-6 py-xl-2">
<div class="bg-secondary rounded h-25 p-4">
<h6 class="mb-3">Symbol</h6>
<select name="symbol" class="form-select form-select-sm mb-3" aria-label=".form-select-sm example">
<option value="">All Symbols</option>
{% for sym in used_symbols %}
<option value={{sym}}>{{sym}}</option>
{% endfor %}
</select>
</div>
<div class="bg-secondary rounded h-25 p-4 mt-2">
<h6 class="mb-3">Side</h6>
<select name="side" class="form-select form-select-sm mb-3" aria-label=".form-select-sm example">
<option value="">All</option>
<option value='l'>Long</option>
<option value='s'>Short</option>
</select>
</div>
<div class="bg-secondary rounded h-25 p-4 mt-2">
<h6 class="mb-3">Status</h6>
<select name="status" class="form-select form-select-sm mb-3" aria-label=".form-select-sm example">
<option value="">All</option>
<option value='l'>Win</option>
<option value='s'>Loss</option>
<option value='s'>Draw</option>
<option value='s'>Open</option>
</select>
</div>
</div>
<div class="col-sm-12 col-xl-6 py-xl-2">
<div class="bg-secondary rounded h-25 p-4">
<h6 class="mb-4">Check, Radio & Switch</h6>
</div>
<div class="bg-secondary rounded h-25 p-4 mt-2">
<h6 class="mb-4">Check, Radio & Switch</h6>
</div>
<div class="bg-secondary rounded h-25 p-4 mt-2">
<h6 class="mb-4">Check, Radio & Switch</h6>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Search</button>
</div>
</div>
</form>The issue I'm facing is that there are unnecessary spaces between the submit button and my columns. I've attempted to adjust this using styling properties like height on the row or columns but haven't been successful.
I have yet to find a solution to eliminate these unwanted spaces...