My goal is to have 1 button positioned near the top and 2 buttons fixed at the bottom. However, when I add the fixed-bottom` class to the div containing the bottom-fixed buttons, it causes them to span the full width of the container. This results in the buttons not having the desired padding. On the other hand, without the "fixed-bottom" class, the buttons have the correct padding but are not in the right location.
I want all buttons to have consistent padding - whether fixed at the bottom or positioned at the top. Is there a simple solution for this issue (perhaps an additional/different class I am overlooking), or do I need to create a custom CSS class to ensure consistent button width?
This scenario involves a .Net MAUI app utilizing Blazor Hybrid and Bootstrap, running on the Android emulator.
Here is an example using the "fixed-bottom" class. The buttons are in the desired location, but the width is not as intended:
<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>
https://i.sstatic.net/mLx96MFD.png
To illustrate, when the "fixed-bottom" class is removed, the buttons have the desired size but are not positioned correctly:
<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>