I've been struggling to find a solution to this issue. My goal is to align the centered elements between two lines, similar to what Bootstrap's documentation shows. There doesn't appear to be any excess margin or padding causing alignment issues, and I can't seem to spot any difference between using justify-content-center and d-flex on the parent, combined with mx-auto on the element. Any suggestions?
Furthermore, do I really need to use d-flex flex-column on all of these elements, or is there a more efficient way to center the label and button so they align perfectly as displayed?
https://i.sstatic.net/MsZTN.png
https://i.sstatic.net/MsZTN.png
UPDATE: Here is the specific code snippet
<div v-if="isDeepSearch" class="d-flex flex-column">
<div class="d-flex flex-column">...omitted for brevity; not relevant...</div>
<div class="d-flex justify-content-around">
<div class="d-flex flex-column text-center">
<label for="isRead">Read State</label>
<button id="isRead" type="button" class="btn btn-sm btn-danger">Unread</button>
</div>
<div class="d-flex flex-column text-center">
<label for="importance">Importance</label>
<div
id="importance"
class="btn-group mt-auto"
role="group"
aria-label="Importance buttons"
>
<button type="button" class="btn btn-sm btn-secondary">Low</button>
<button type="button" class="btn btn-sm btn-warning">Medium</button>
<button type="button" class="btn btn-sm btn-danger">High</button>
</div>
</div>
<div class="d-flex flex-column text-center">
<label for="isRead">Has Attachment</label>
<button id="isRead" type="button" class="btn btn-sm btn-success">Yes</button>
</div>
</div>
</div>
<div class="d-flex justify-content-center">
<button
class="my-3 btn btn-lg btn-success"
:disabled="isSearchDisabled"
@click.prevent="search()"
>
<div v-if="!searching">
<i class="fas fa-search"></i> Search
</div>
<div v-else>
<i class="fas fa-spinner fa-spin"></i> Searching...
</div>
</button>
</div>