DEV Community


Custom Bootstrap Badges

Jennifer Fadriquela
Stuff Developer
・1 min read

I recently made a custom badge that has a 'delete' functionality. I used Bootstrap Flex utility layout and its Badge component styles.

Alt Text

  <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>

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.

Discussion (0)

Forem Open with the Forem app