Bootstrap Button Group and Badges Examples

What are Badges?

Badges are small visual indicators that provide context or additional information to users. They can display counts, status updates, or important notifications without taking up much space. Badges are often used alongside buttons, links, or navigation items to convey important information at a glance.

Why Use Badges?

  • Information at a Glance: Badges allow users to quickly see important information without overwhelming details.
  • User Engagement: They can draw attention to specific actions, encouraging interaction and improving user experience.
  • Organizational Tool: Badges help categorize or prioritize items, simplifying navigation through content.
  • Visual Hierarchy: Badges can establish a visual hierarchy, making critical information stand out.
  • Feedback Mechanism: They can indicate changes in status or quantity, providing immediate feedback to users.

Best Practices for Using Badges

  • Keep It Simple: Use concise text or numbers to ensure clarity. Avoid cluttering badges with excessive information.
  • Use Meaningful Colors: Choose colors that convey meaning (e.g., red for alerts, green for success) to enhance understanding.
  • Position Wisely: Place badges in logical positions (e.g., near related buttons or items) to maintain context.
  • Limit Frequency: Use badges sparingly to avoid overwhelming users and maintain their significance.

Examples of Badge Usage

Here are a few common scenarios where badges can be effectively utilized:

  • Notifications: Display unread message counts or alerts on icons.
  • E-commerce: Show item quantities in shopping carts or stock availability.
  • Social Media: Indicate new followers, likes, or comments on user profiles.

GroupButtons Code Examples


        <!DOCTYPE html>
        <html lang="en">
          <head>
            <title>Bootstrap GroupButtons Example</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
          </head>
          <body>
            <div class="container mt-5">
              <!-- Basic Button Group with Badges -->
              <h3>Basic Button Group with Badges</h3>
              <div class="btn-group" role="group" aria-label="Basic example">
                <button type="button" class="btn btn-primary btn-lg">Left <span class="badge bg-light text-dark">4</span></button>
                <button type="button" class="btn btn-primary btn-lg">Middle <span class="badge bg-light text-dark">10</span></button>
                <button type="button" class="btn btn-primary btn-lg">Right <span class="badge bg-light text-dark">1</span></button>
                <button type="button" class="btn btn-primary btn-lg">Extra <span class="badge bg-light text-dark">9</span></button>
              </div>
        
              <!-- Button Toolbar with Group -->
              <h3>Button Toolbar with Badges</h3>
              <div class="btn-toolbar mb-3" role="toolbar" aria-label="Toolbar with button groups">
                <div class="btn-group me-2" role="group" aria-label="First group">
                  <button type="button" class="btn btn-secondary btn-lg">1 <span class="badge bg-light text-dark">3</span></button>
                  <button type="button" class="btn btn-secondary btn-lg">2 <span class="badge bg-light text-dark">5</span></button>
                  <button type="button" class="btn btn-secondary btn-lg">3 <span class="badge bg-light text-dark">12</span></button>
                  <button type="button" class="btn btn-secondary btn-lg">4 <span class="badge bg-light text-dark">9</span></button>
                </div>
                <div class="btn-group me-2" role="group" aria-label="Second group">
                  <button type="button" class="btn btn-secondary btn-lg">5 <span class="badge bg-light text-dark">7</span></button>
                  <button type="button" class="btn btn-secondary btn-lg">6 <span class="badge bg-light text-dark">2</span></button>
                  <button type="button" class="btn btn-secondary btn-lg">7 <span class="badge bg-light text-dark">6</span></button>
                </div>
                <div class="btn-group" role="group" aria-label="Third group">
                  <button type="button" class="btn btn-secondary btn-lg">8 <span class="badge bg-light text-dark">4</span></button>
                  <button type="button" class="btn btn-secondary btn-lg">9 <span class="badge bg-light text-dark">3</span></button>
                  <button type="button" class="btn btn-secondary btn-lg">10 <span class="badge bg-light text-dark">8</span></button>
                </div>
              </div>
        
              <!-- Vertical Button Group with Badges -->
              <h3>Vertical Button Group with Badges</h3>
              <div class="btn-group-vertical mb-4" role="group" aria-label="Vertical button group">
                <button type="button" class="btn btn-info btn-lg">Button 1 <span class="badge bg-light text-dark">3</span></button>
                <button type="button" class="btn btn-info btn-lg">Button 2 <span class="badge bg-light text-dark">8</span></button>
                <button type="button" class="btn btn-info btn-lg">Button 3 <span class="badge bg-light text-dark">5</span></button>
                <button type="button" class="btn btn-info btn-lg">Button 4 <span class="badge bg-light text-dark">1</span></button>
                <button type="button" class="btn btn-info btn-lg">Button 5 <span class="badge bg-light text-dark">6</span></button>
                <button type="button" class="btn btn-info btn-lg">Button 6 <span class="badge bg-light text-dark">10</span></button>
                <button type="button" class="btn btn-info btn-lg">Button 7 <span class="badge bg-light text-dark">12</span></button>
                <button type="button" class="btn btn-info btn-lg">Button 8 <span class="badge bg-light text-dark">4</span></button>
              </div>
        
              <!-- Dropdown Button Group with Badges -->
              <h3>Dropdown Button Group with Badges</h3>
              <div class="btn-group" role="group" aria-label="Button group with dropdown">
                <button type="button" class="btn btn-warning btn-lg">Action 1 <span class="badge bg-light text-dark">5</span></button>
                <button type="button" class="btn btn-warning btn-lg">Action 2 <span class="badge bg-light text-dark">4</span></button>
                <div class="btn-group">
                  <button type="button" class="btn btn-warning dropdown-toggle btn-lg" data-bs-toggle="dropdown" aria-expanded="false">
                    Dropdown <span class="badge bg-light text-dark">2</span>
                  </button>
                  <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#">Action 3 <span class="badge bg-light text-dark">1</span></a></li>
                    <li><a class="dropdown-item" href="#">Action 4 <span class="badge bg-light text-dark">5</span></a></li>
                    <li><a class="dropdown-item" href="#">Action 5 <span class="badge bg-light text-dark">3</span></a></li>
                    <li><a class="dropdown-item" href="#">Action 6 <span class="badge bg-light text-dark">9</span></a></li>
                    <li><a class="dropdown-item" href="#">Action 7 <span class="badge bg-light text-dark">3</span></a></li>
                  </ul>
                </div>
              </div>
        
            </div>
        
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
          </body>
        </html>
        

Output Example

Basic Button Group with Badges

Button Toolbar with Badges

Vertical Button Group with Badges

Dropdown Button Group with Badges