As a newcomer to Bootstrap, I have come across only one individual who has raised this issue before. Unfortunately, they did not receive a satisfactory solution, prompting me to bring up the question once more.
My dilemma involves two button groups. When viewed on larger screens, I intend for them to align on the same row with one group left-aligned and the other right-aligned. The challenge arises when the screen size reduces, causing the right-aligned group to drop down to the next line. Although this functionality is currently operational, I am facing difficulty in ensuring that the right-aligned group shifts to the left when this rearrangement occurs. The crux of the problem, as experienced by myself and the previous post mentioned, lies in dealing with one dynamically sized element, making it impossible to rely solely on Bootstrap breakpoints. The shift should be responsive to the available space for the right-aligned button group rather than the absolute window size.
Below is the excerpt of my current HTML:
<div class = "btn-group grouped-buttons btn-group-toggle" data-toggle="buttons" style = "margin: 25px">
<!-- Dynamically sized button group left aligned-->
<button *ngFor = "let type of typeList" class = "btn btn-default" type = "button" (click) = "catagoryFilter(type.name)" [ngClass] = "{'active': typeSelect == type.name}">{{type.name}}</button>
</div>
<div class = "btn-group grouped-buttons btn-group-toggle float-right" data-toggle="buttons" style = "margin-top: 25px">
<!--Fixed size button group which should float-right only on the same line -->
<button class="btn btn-red" type="button" (click)="newSpeciesModal.show()"><fa-icon [icon]="addIcon"></fa-icon> New Species</button>
<button class="btn btn-blue" type="button" (click)="newSpeciesTypeModal.show()"><fa-icon [icon]="addIcon"></fa-icon> New Species Type</button>
</div>