I recently made a custom badge that has a 'delete' functionality. I used Bootstrap Flex utility layout and its Badge component styles.
<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.
Top comments (0)