I am currently working with the footer system in bootstrap 4 and I have a specific requirement. I need to place two buttons next to each other in the footer, filling the available space.
Here is an example of what I am trying to achieve: see here for current bootstrap footer button
The existing button in the picture uses all the available space. What I want to do is modify it so that the green checkmark appears on the left side, and a red button on the right side. Both buttons should fill the available space within the footer and be of equal width. I do not want them floating in the footer independently.
This is my code for creating a single full-width footer button:
<a class="card-footer" style="background-color:#85e085">
Check In
</a>
Below is the code I tried for generating a 2-button footer, but it did not give me the desired output:
<div class="row">
<a class="col-sm-6" style="background-color:#85e085">
Check In
</a>
<a class="col-sm-6" style="background-color:#85e777">
Check In
</a>
</div>
I have attempted different approaches like using divs for containing the footer and applying column classes, as well as experimenting with flex boxes. However, none of these methods gave me the desired outcome. Any help or guidance would be greatly appreciated!
EDIT: Here is the final code I arrived at after considering the accepted answer:
<div class="container card-footer" style="padding:0!important;">
<div class="row" style="margin:0!important;" >
<a class="col-6" style="background-color:#85e085;text-align:center;padding:1em 0em">
Check In
</a>
<a class="col-6" style="background-color:#85e777;text-align:center;padding:1em 0em;">
Check In
</a>
</div>
</div>