Javascript MDBootstrap Badge Component

Last Updated : 07 Mar, 2022

MDBootstrap is a Material Design and bootstrap-based Javascript UI library that is used to make attractive webpages with its seamless and easy-to-use component. It is free for both personal & commercial use. In this article, we will know how to use Badge Component in Javascript MDBootstap.

MDBootstrap Badge Components are responsive badges built using Bootstrap 5, that can be used to add additional information such as counts or labels to any content.

Syntax:

<h2>Heading
    <span class="badge">Heading</span>
</h2>

Approach:

Download Javascript MDBootstrap from the official site.
Extract the files to the current working directory.
In the Index.html file, specify the downloaded file path in the <head> tag.

<link rel=”icon” href=”img/mdb-favicon.ico” type=”image/x-icon” />
<link rel=”stylesheet” href=”https://use.fontawesome.com/releases/v5.15.2/css/all.css” />
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap”/>
<link rel=”stylesheet” href=”css/mdb.min.css” />
<script type=”text/javascript” src=”js/mdb.min.js”></script>
<script type=”text/javascript”></script>

Example 1: This is the basic example that shows how to use the badge component in MDBootstrap Javascript.

HTML

<!DOCTYPE html > 
<html lang="en"> 
  
<head> 
    <title>Javascript MDBootstrap List Group Component</title> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1,  
                   shrink-to-fit=no" /> 
    <link rel="icon" 
          href="img/mdb-favicon.ico" 
          type="image/x-icon" /> 
    <link rel="stylesheet"
          href= 
"https://use.fontawesome.com/releases/v5.15.2/css/all.css" /> 
    <link rel="stylesheet"
          href= 
"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" /> 
    <link rel="stylesheet"
          href="css/mdb.min.css" /> 
    <script type="text/javascript" 
            src="js/mdb.min.js"> 
    </script> 
</head> 
  
<body> 
    <h2 style="margin-left: 50px; 
               margin-top: 50px;"> 
        GeeksforGeeks 
    </h2> 
    <h4 style="margin-left: 50px;"> 
        MDBootstrap Javascript Badge Component 
    </h4> 
    <br> 
    <div style="margin-left: 50px;">  
        <a href="#">New Mails 
            <i class="fas fa-envelope fa-lg"></i> 
            <span class= 
                "badge rounded-pill badge-notification bg-danger">36 
            </span> 
        </a> 
        <br> 
        <a href="">New Notification 
            <i class="fas fa-envelope fa-lg"></i> 
            <span class="badge bg-danger badge-dot"></span> 
        </a> 
        <br> 
        <a href="#">Missed Call 
            <i class="fas fa-phone fa-lg"></i> 
            <span class="badge bg-danger badge-dot">3</span> 
        </a> 
        <br> 
        <a href="#">Comments 
            <i class="far fa-comment fa-lg"></i> 
            <span class="badge bg-danger badge-dot">1</span> 
        </a>  
    </div> 
</body> 
</html>

Output:

Javascript MDBootstrap Badge Component

Example 2: In this example, we will know how to add some additional content to the badge component in MDBootstrap Javascript.

HTML

<!DOCTYPE html > 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1,  
                   shrink-to-fit=no" /> 
    <link rel="icon" 
          href="img/mdb-favicon.ico" 
          type="image/x-icon" /> 
    <link rel="stylesheet" 
          href= 
"https://use.fontawesome.com/releases/v5.15.2/css/all.css" /> 
    <link rel="stylesheet" 
          href= 
"https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap" /> 
    <link rel="stylesheet" 
          href="css/mdb.min.css" /> 
    <script type="text/javascript" 
            src="js/mdb.min.js"> 
    </script> 
</head> 
  
<body> 
    <h2 style="margin-left: 50px;  
               margin-top: 50px;"> 
        GeeksforGeeks 
    </h2> 
    <h4 style="margin-left: 50px;"> 
        MDBootstrap Javascript Badge Component 
    </h4> 
    <br> 
    <h5 style="margin-left: 50px;">Heading  
      <span class="badge rounded-pill bg-primary">New</span> 
    </h5> 
    <button style="margin-left: 50px;" 
            type="button" 
            class="btn btn-danger"> Button 
        <span class="badge bg-info ms-2">2</span> 
    </button> 
</body> 
</html>