In a simple 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 obviously aren't in the location I want them.
I want the buttons fixed to the bottom to have that 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>
Example when I simply 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>