Custom Bootstrap Badges

#css #html #bootstrap

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.

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.