What are the badges in Bootstrap? Why it has been used? State with the help of an example.

0 votes
120 views
Ethan Karla asked 28-Jul-2021 in Web Application by Ethan Karla

What are the badges in Bootstrap? Why it has been used? State with the help of an example.

1 Answer

0 votes
Ravi Vishwakarma answered 12-Aug-2021 by Ravi Vishwakarma

bootstrap provides badge classes. this badge class is used for making the notification pane. this badge always writes in the span tag. we can also change the badge background color, text color, etc.

<!DOCTYPE html>
<html lang='en'>
<head>
  <title>Bootstrap Example</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.5.2/css/bootstrap.min.css'>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js'></script>
  <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js'></script>
</head>
<body>
<div class='container'>
  <h2>Badge</h2>
  <span class='badge badge-primary'>normal badge</span>
    <span class='badge badge-pill badge-primary'>pill badge</span>
 <button type='button' class='btn btn-primary'>
  New Messages <span class='badge badge-danger'>10</span>
</button>
  <button type='button' class='btn btn-primary position-relative mx-3'>
  Inbox
  <span class='position-absolute badge rounded-pill bg-danger'>
    99+
  </span>
</button>
    <button type='button' class='btn btn-primary position-relative mx-3'>
  Profile
  <span class='position-absolute p-2 bg-danger border border-light rounded-circle'></span>
</button>
</div>
</body>
</html>

What are the badges in Bootstrap? Why it has been used? State with the help of an example.