Badges


Badges are small components useful for labeling and providing additional information. We will use them to finish our contact section.

Basic example

Use .badge class together with color class (for example badge-primary) to provide your visitors with highlighted, new or unread items by adding it to links, text navs, and more.

        
            
  
      <h2>Example heading <span class="badge badge-primary">New</span></h2>
  
      
        
    

Example heading New

Sizes

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

        
            
  
      <h1>Example heading <span class="badge badge-primary">New</span></h1>
      <h2>Example heading <span class="badge badge-primary">New</span></h2>
      <h3>Example heading <span class="badge badge-primary">New</span></h3>
      <h4>Example heading <span class="badge badge-primary">New</span></h4>
      <h5>Example heading <span class="badge badge-primary">New</span></h5>
      <h6>Example heading <span class="badge badge-primary">New</span></h6>
  
      
        
    

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New
Colors

Use our badge color classes to quickly change the appearance of a badge.

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

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

        
            
  
      <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>
  
      
        
    
Primary Secondary Success Danger Warning Info Light Dark
Icon inside

You can place an icon inside the badge. Read icons docs to see all the available icons.

        
            
  
      <div class="badge badge-primary p-3 rounded-4">
        <i class="fas fa-chart-pie"></i>
      </div>
  
      
        
    
Note: If you want to learn more about badges read badges documentation page.
Step 1 - add text to the badge

In our project we will use a badge with an icon inside. Put it in flexbox and add text to it.

        
            
  
      <div class="d-flex align-items-start">
        <div class="p-3 badge-primary rounded-4">
          <i class="fas fa-headset fa-lg fa-fw"></i>
        </div>
        <div class="ms-4">
          <p class="fw-bold mb-1">Technical support</p>
          <p class="text-muted mb-0">support@example.com</p>
          <p class="text-muted mb-0">+1 234-567-89</p>
        </div>
      </div>
  
      
        
    

Technical support

support@example.com

+1 234-567-89

Thanks to flexbox, we can define how the badge should be aligned in relation to the text.

The align-items-start class makes it top-aligned. However, if we change it to the class align-items-center or align-items-end then we can modify the alignment.

        
            
    
        <!-- Top-aligned -->
        <div class="d-flex align-items-start mb-5">
          <div class="p-3 badge-primary rounded-4">
            <i class="fas fa-headset fa-lg fa-fw"></i>
          </div>
          <div class="ms-4">
            <p class="fw-bold mb-1">Technical support</p>
            <p class="text-muted mb-0">support@example.com</p>
            <p class="text-muted mb-0">+1 234-567-89</p>
          </div>
        </div>

        <!-- Center-aligned -->
        <div class="d-flex align-items-center mb-5">
          <div class="p-3 badge-primary rounded-4">
            <i class="fas fa-headset fa-lg fa-fw"></i>
          </div>
          <div class="ms-4">
            <p class="fw-bold mb-1">Technical support</p>
            <p class="text-muted mb-0">support@example.com</p>
            <p class="text-muted mb-0">+1 234-567-89</p>
          </div>
        </div>

        <!-- Bottom-aligned -->
        <div class="d-flex align-items-end mb-5">
          <div class="p-3 badge-primary rounded-4">
            <i class="fas fa-headset fa-lg fa-fw"></i>
          </div>
          <div class="ms-4">
            <p class="fw-bold mb-1">Technical support</p>
            <p class="text-muted mb-0">support@example.com</p>
            <p class="text-muted mb-0">+1 234-567-89</p>
          </div>
        </div>
    
        
        
    

Technical support

support@example.com

+1 234-567-89

Technical support

support@example.com

+1 234-567-89

Technical support

support@example.com

+1 234-567-89

In addition, we use the text-muted classes to give a gray color to the secondary text, and the fa-fw (fixed width) class to make all icons in badges the same width (by default icons can be different, which would make our badges uneven)

Step 2 - create 4 badges within a grid

Let's create 4 badges for our contact form and place them in the grid, two columns in a row.

Note that you don't need to add 2 <div class="row"> elements. One is enough, and if you add 4 columns inside, each 6 grid units wide, then they will automatically stack underneath each other if they exceed 12 grid units. Here we have 24 units combined (4 columns, 6 units wide each) so they will split nicely into 2 rows.

        
            
    
        <div class="row gx-lg-5">
          <div class="col-md-6 mb-4 mb-md-5">
            <div class="d-flex align-items-start">
              <div class="p-3 badge-primary rounded-4">
                <i class="fas fa-headset fa-lg fa-fw"></i>
              </div>
              <div class="ms-4">
                <p class="fw-bold mb-1">Technical support</p>
                <p class="text-muted mb-0">support@example.com</p>
                <p class="text-muted mb-0">+1 234-567-89</p>
              </div>
            </div>
          </div>
  
          <div class="col-md-6 mb-4 mb-md-5">
            <div class="d-flex align-items-start">
              <div class="p-3 badge-primary rounded-4">
                <i class="fas fa-dollar-sign fa-lg fa-fw"></i>
              </div>
              <div class="ms-4">
                <p class="fw-bold mb-1">Sales questions</p>
                <p class="text-muted mb-0">sales@example.com</p>
                <p class="text-muted mb-0">+1 234-567-88</p>
              </div>
            </div>
          </div>
  
          <div class="col-md-6 mb-4 mb-md-5">
            <div class="d-flex align-items-start">
              <div class="p-3 badge-primary rounded-4">
                <i class="fas fa-newspaper fa-lg fa-fw"></i>
              </div>
              <div class="ms-4">
                <p class="fw-bold mb-1">Press</p>
                <p class="text-muted mb-0">press@example.com</p>
                <p class="text-muted mb-0">+1 234-567-87</p>
              </div>
            </div>
          </div>
  
          <div class="col-md-6 mb-4 mb-md-5">
            <div class="d-flex align-items-start">
              <div class="p-3 badge-primary rounded-4">
                <i class="fas fa-bug fa-lg fa-fw"></i>
              </div>
              <div class="ms-4">
                <p class="fw-bold mb-1">Bug report</p>
                <p class="text-muted mb-0">bugs@example.com</p>
                <p class="text-muted mb-0">+1 234-567-86</p>
              </div>
            </div>
          </div>
        </div>
    
        
        
    

Technical support

support@example.com

+1 234-567-89

Sales questions

sales@example.com

+1 234-567-88

Press

press@example.com

+1 234-567-87

Bug report

bugs@example.com

+1 234-567-86

Step 3 - add badges to the Contact section

Now let's add our badges to the second column in the Contact Section.

        
            
    
      <!-- Section: Contact -->
      <section class="mb-5 mb-lg-10">

        <h3 class="fw-bold text-center mb-5">Contact us</h3>

        <div class="row gx-xl-5">

          <div class="col-lg-5 mb-4 mb-lg-0">

            <form>
              <!-- Name input -->
              <div class="form-outline mb-4">
                <input type="text" id="form4Example1" class="form-control" />
                <label class="form-label" for="form4Example1">Name</label>
              </div>

              <!-- Email input -->
              <div class="form-outline mb-4">
                <input type="email" id="form4Example2" class="form-control" />
                <label class="form-label" for="form4Example2">Email address</label>
              </div>

              <!-- Message input -->
              <div class="form-outline mb-4">
                <textarea class="form-control" id="form4Example3" rows="4"></textarea>
                <label class="form-label" for="form4Example3">Message</label>
              </div>

              <!-- Checkbox -->
              <div class="form-check d-flex justify-content-center mb-4">
                <input class="form-check-input me-2" type="checkbox" value="" id="form4Example4" checked />
                <label class="form-check-label" for="form4Example4">
                  Send me a copy of this message
                </label>
              </div>

              <!-- Submit button -->
              <button type="submit" class="btn btn-primary btn-block mb-4">Send</button>
            </form>

          </div>

          <div class="col-lg-7 mb-4 mb-lg-0">

            <div class="row gx-lg-5">
              <div class="col-md-6 mb-4 mb-md-5">
                <div class="d-flex align-items-start">
                  <div class="p-3 badge-primary rounded-4">
                    <i class="fas fa-headset fa-lg fa-fw"></i>
                  </div>
                  <div class="ms-4">
                    <p class="fw-bold mb-1">Technical support</p>
                    <p class="text-muted mb-0">support@example.com</p>
                    <p class="text-muted mb-0">+1 234-567-89</p>
                  </div>
                </div>
              </div>

              <div class="col-md-6 mb-4 mb-md-5">
                <div class="d-flex align-items-start">
                  <div class="p-3 badge-primary rounded-4">
                    <i class="fas fa-dollar-sign fa-lg fa-fw"></i>
                  </div>
                  <div class="ms-4">
                    <p class="fw-bold mb-1">Sales questions</p>
                    <p class="text-muted mb-0">sales@example.com</p>
                    <p class="text-muted mb-0">+1 234-567-88</p>
                  </div>
                </div>
              </div>

              <div class="col-md-6 mb-4 mb-md-5">
                <div class="d-flex align-items-start">
                  <div class="p-3 badge-primary rounded-4">
                    <i class="fas fa-newspaper fa-lg fa-fw"></i>
                  </div>
                  <div class="ms-4">
                    <p class="fw-bold mb-1">Press</p>
                    <p class="text-muted mb-0">press@example.com</p>
                    <p class="text-muted mb-0">+1 234-567-87</p>
                  </div>
                </div>
              </div>

              <div class="col-md-6 mb-4 mb-md-5">
                <div class="d-flex align-items-start">
                  <div class="p-3 badge-primary rounded-4">
                    <i class="fas fa-bug fa-lg fa-fw"></i>
                  </div>
                  <div class="ms-4">
                    <p class="fw-bold mb-1">Bug report</p>
                    <p class="text-muted mb-0">bugs@example.com</p>
                    <p class="text-muted mb-0">+1 234-567-86</p>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>

      </section>
      <!-- Section: Contact -->
    
        
        
    

And this is what it should look like in the end:




John Doe

About author

Michal Szymanski

Co Founder at MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.