In Bootstrap why does "fixed-bottom" make the buttons full width when otherwise they aren't?

On one page, I want 1 button near the top and 2 buttons fixed to the bottom. With everything else being equal when I add the fixed-bottom` class to the div containing the buttons to be fixed to the bottom it causes the buttons to span the full width of the container. But when "fixed-bottom" isn't used the buttons automatically have the padding I want, but aren't in the location I want them.

I want the buttons fixed to the bottom to have the same padding as the one on top. Is there a quick way to accomplish this (an extra/different class I'm missing?) or will I need to go back and add my own CSS class to apply to all the buttons to keep the width consistent?

This is a .Net MAUI app using Blazor Hybrid and Bootstrap and the example is running in the Android emulator in case any of that makes a difference.

Example trying to use "fixed-bottom" class. I want the buttons in this location, but not spanning the entire width:

<div class="text-center d-flex flex-column" style="z-index: -1;">
  <button type="button" class="btn btn-primary btn-lg btn-block gsewq-button-primary" @onclick="SyncLookupValues">Sync Lookup Values</button>
</div>
<div class="text-center flex-column d-flex fixed-bottom">
    <button type="button" class="btn btn-primary btn-lg btn-block gsewq-button-primary" @onclick="Logout">Logout</button>
    <div class="vertical-spacer-1"></div>
    <button type="button" class="btn btn-primary btn-lg btn-block gsewq-button-primary" @onclick="ChangeEnvironment">Change Environment</button>
    <div class="vertical-spacer-7_5"></div>
</div>

For example when I take out the "fixed-bottom" class. Now the buttons are sized how I'd like them, but not located where I want them:

<div class="text-center d-flex flex-column" style="z-index: -1;">
  <button type="button" class="btn btn-primary btn-lg btn-block gsewq-button-primary" @onclick="SyncLookupValues">Sync Lookup Values</button>
</div>
<div class="text-center flex-column d-flex">
    <button type="button" class="btn btn-primary btn-lg btn-block gsewq-button-primary" @onclick="Logout">Logout</button>
    <div class="vertical-spacer-1"></div>
    <button type="button" class="btn btn-primary btn-lg btn-block gsewq-button-primary" @onclick="ChangeEnvironment">Change Environment</button>
    <div class="vertical-spacer-7_5"></div>
</div>

fixed-bottom is

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1030;
}

btn-blocks is (note: its' deprecated in bootstrap 5, to mannage in bootstrap 5 see the docs)

.btn-block {
  display: block;
  width: 100%;
}

you can use mx-3 to add a margin in your div withflex

To know about flex, check this link