I'm facing an issue with my btn-toolbar. It contains two btn-group, and by default, they are aligned to the left. However, I need the second toolbar to be aligned to the right.
This is the snippet of my code:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="btn-toolbar rounded" role="toolbar" aria-label="Toolbar with button groups" id="main-toolbar">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-dark btn-md text-center rounded" id="toolbar-button">
<span class="fa fa-edit fa-2x"></span><br>
<span class="toolbar-item-text">Edit</span>
</button>
</div>
<div class="btn-group mr-2 float-right" role="group" aria-label="Second group">
<button type="button" class="btn btn-dark btn-md text-center rounded" id="toolbar-button" id="measurement-button">
<span class="fa fa-bars fa-2x"></span><br>
<span class="toolbar-item-text">Measurements</span>
</button>
</div>
</div>In Bootstrap 3, it used to work with pull-right, but in Bootstrap 4 (which includes popperJS), it doesn't align as expected. I've tried various solutions from Stack Overflow, but none seem to work when the btn-group is within a btn-toolbar.
Here's how it currently looks:
https://i.sstatic.net/sOJc6.png
Instead of appearing on the next line, I want the 'Measurements' button to be positioned in the right corner. Any suggestions? Thanks!