<h3> <div class="badge badge-dark m-1"> <div class="d-flex align-items-center justify-content-between"> <span class="pr-2">Sample</span> <i (click)="clickMe()" class="fa fa-times"></i> </div> </div> </h3>
The examples on bootstrap's site were limited to a single entity inside a span. Though it endorses links as actionable badges, my requirement wants to have a second entity inside the badge with an isolated action.
I placed the text and close icon inside a
d-flex container to properly align them.
Here is the demo.