Bootstrap 4 | Badges - GeeksforGeeks

29 Apr, 2022
The .badge class is used to add additional information to the content. For example, some websites associate a number of notifications to the link. The notification number is seen when logged in to a particular website which tells the numbers of news or notifications to see by clicking it.Example:  
HTML
<!DOCTYPE html><html lang="en"><head>    <title>Bootstrap Badges</title>    <meta charset="utf-8">    <meta name="viewport"        content="width=device-width, initial-scale=1">    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head><body>    <h1 style="color:green;text-align:center;">        GeeksforGeeks    </h1>    <div class="container">        <h4>Notifications heading            <span class="badge badge-secondary">                4              </span>        </h4>        <h4>Updates            <span class="badge badge-secondary">                2              </span>        </h4>        <h4>Messages            <span class="badge badge-secondary">                1              </span>        </h4>        <h4>Request            <span class="badge badge-secondary">                0              </span>        </h4>    </div></body></html>
Output:  
Contextual Badges: The contextual classes (.badge-*) is used to change the color of badges. Badges can be used as part of links or button to provide a counter. Depending on how they used, badges must be confusing for the users. For this purpose different color of variations are used so that the user may not get confused.Example:  
HTML
<!DOCTYPE html><html lang="en"><head>    <title>Bootstrap Badges</title>    <meta charset="utf-8">    <meta name="viewport"        content="width=device-width, initial-scale=1">    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head><body>    <h1 style="color:green;text-align:center;">        GeeksforGeeks    </h1>    <div class="container">        <h4>Notifications heading            <span class="badge badge-primary">                4              </span>        </h4>        <h4>Updates            <span class="badge badge-warning">                2              </span>        </h4>        <h4>Messages            <span class="badge badge-success">                1              </span>        </h4>        <h4>Request            <span class="badge badge-danger">                0              </span>        </h4>    </div></body></html>
Output:  
Pill Badges: The .badge-pill class is used to make badges corner more rounded.Example:  
HTML
<!DOCTYPE html><html lang="en"><head>    <title>Bootstrap Badges</title>    <meta charset="utf-8">    <meta name="viewport"        content="width=device-width, initial-scale=1">    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head><body>    <h1 style="color:green;text-align:center;">        GeeksforGeeks    </h1>    <div class="container">        <h4>Notifications heading            <span class="badge badge-primary badge-pill">                4              </span>        </h4>        <h4>Updates            <span class="badge badge-warning badge-pill">                2              </span>        </h4>        <h4>Messages            <span class="badge badge-success badge-pill">                1              </span>        </h4>        <h4>Request            <span class="badge badge-danger badge-pill">                0              </span>        </h4>    </div></body></html>
Output:  
Badge inside an Element: Badges can be created inside an element.Example:  
HTML
<!DOCTYPE html><html lang="en"><head>    <title>Bootstrap Badges</title>    <meta charset="utf-8">    <meta name="viewport"        content="width=device-width, initial-scale=1">    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">    </script>    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">    </script></head><body>    <h1 style="color:green;text-align:center;">        GeeksforGeeks    </h1>    <div class="container">        <button type="button" class="btn btn-primary">            <h4>Notifications heading                <span class="badge badge-primary badge-danger">4</span>            </h4>        </button><br><br>        <button type="button" class="btn btn-warning">            <h4>Updates                <span class="badge badge-light">2</span>            </h4>        </button><br><br>        <button type="button" class="btn btn-primary">            <h4>Messages                <span class="badge badge-success">1</span>            </h4>        </button><br><br>        <button type="button" class="btn btn-danger">            <h4>Request                <span class="badge badge-primary">0</span>            </h4>        </button>    </div></body></html>
Output:  
Supported Browsers:
Google Chrome
Internet Explorer
Firefox
Opera
Safari
ysachin2314
Bootstrap-4
Bootstrap
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to change navigation bar color in Bootstrap ?
Form validation using jQuery
How to align navbar items to the right in Bootstrap 4 ?
How to pass data into a bootstrap modal?
How to Show Images on Click using HTML ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills