I've been struggling to align my contents to the baseline while working with the bootstrap framework. I tried following the instructions in the documentation, but it didn't work out as expected.
<div class="row">
<div class="col-12">
<span class="h5">My Games</span>
<button type="button" class="btn btn-info float-right" v-b-modal.create-game>New Game</button>
</div>
</div>
This is the result: https://i.stack.imgur.com/urQCo.png
The Bootstrap documentation suggests using the following code to align items to the baseline:
<div class="d-flex align-items-baseline">...</div>
However, when I applied it to my col-12 element like this:
<div class="row">
<div class="col-12 d-flex align-items-baseline">
<span class="h5">My Games</span>
<button type="button" class="btn btn-info float-right" v-b-modal.create-game>New Game</button>
</div>
</div>
the outcome was not what I desired: https://i.stack.imgur.com/I3obg.png
I also checked a post on Stack Overflow that recommended using flex and align-items:baseline on the row div. But even after trying that, I couldn't achieve the desired alignment.
If anyone has suggestions on how to correct this issue and achieve the desired look where the text is aligned to the baseline and spread apart, please let me know!
I'm aiming for something like this: https://i.stack.imgur.com/jxGjl.png
Thank you!