Circle badge

Bootstrap 5 Circle badge component

Responsive Circle badge built with Bootstrap 5. Pleasing to the eye circle badges add extra information like count or label to any content. Use pills or chips.

Pill badges

Use the .rounded-pill utility class to make badges more rounded with a larger border-radius.

Primary Secondary Success Danger Warning Info Light Dark
Edit in sandbox 
        
            
          <span class="badge rounded-pill badge-primary">Primary</span>
          <span class="badge rounded-pill badge-secondary">Secondary</span>
          <span class="badge rounded-pill badge-success">Success</span>
          <span class="badge rounded-pill badge-danger">Danger</span>
          <span class="badge rounded-pill badge-warning">Warning</span>
          <span class="badge rounded-pill badge-info">Info</span>
          <span class="badge rounded-pill badge-light">Light</span>
          <span class="badge rounded-pill badge-dark">Dark</span>

Chips

Chips can be used to represent small blocks of information. They are most commonly used either for contacts or tags.

Text
Contact Person John Doe
Contact Person John Doe
Contact Person John Doe
Edit in sandbox 
        
            
            <div class="chip" data-mdb-close="true">Text</div>

            <div class="chip">
              <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp" alt="Contact Person" />
              John Doe
              <i class="close fas fa-times"></i>
            </div>

            <div class="chip chip-md">
              <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp" alt="Contact Person" />
              John Doe
              <i class="close fas fa-times"></i>
            </div>

            <div class="chip chip-lg">
              <img src="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-6.webp" alt="Contact Person" />
              John Doe
              <i class="close fas fa-times"></i>
            </div>