Badges:
Badges are numbers associated with the link to indicate the number of items associated with the link. The notification number is seen when logged in to a particular website and tells the numbers of news or notifications to see by clicking it.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>badge example</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<style>
.container {
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<a href="#">UPDATES
<span class="badge badge-secondart">
4
</span>
</a>
<br>
<a href="#">NOTIFICATIONS
<span class="badge badge-secondart">
10
</span>
</a>
<br>
<a href="#">MESSAGES
<span class="badge badge-secondart">
4
</span>
</a>
<br>
</div>
</body>
</html>
|
Output:
Contextual Variations: Badges can be used as part of links or buttons to provide a counter. Depending on how they are used, badges must be confusing for the users, for this purpose different colors of variations are used so that the user may not get confused.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>badge example</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
<style>
.container {
font-size: 20px;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary">
NOTIFICATIONS
<span class="badge badge-light">2</span>
</button>
<br>
<br>
<button type="button" class="btn btn-default">
MESSAGES
<span class="badge badge-warning">2</span>
</button>
<br>
<br>
<button type="button" class="btn btn-info">
UPDATES
<span class="badge badge-danger">2</span>
</button>
<br>
<br>
<button type="button" class="btn btn-light">
NEWS
<span class="badge badge-success">2</span>
</button>
</div>
</body>
</html>
|
Output:
Pill Badges: The badges that use class = “badge-pill” to make the corner more rounded.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>badge example</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
<style>
.container {
font-size: 20px;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<button type="button" class="btn btn-primary">
NOTIFICATIONS
<span class="badge badge-pill badge-light">2</span>
</button>
<br>
<br>
<button type="button" class="btn btn-default">
MESSAGES
<span class="badge badge-pill badge-warning">2</span>
</button>
<br>
<br>
<button type="button" class="btn btn-info">
UPDATES
<span class="badge badge-pill badge-danger">2</span>
</button>
<br>
<br>
<button type="button" class="btn btn-light">
NEWS
<span class="badge badge-pill badge-success">2</span>
</button>
</div>
</body>
</html>
|
Output:
Badges as Link: Badges can also be used as a direct link to the new page.
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<title>badge example</title>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
<style>
.container {
font-size: 20px;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<a href="#"><button type="button"
class="btn btn-primary">
NOTIFICATIONS
<span class="badge badge-pill badge-light">
2
</span>
</button>
</a>
<br>
<br>
<a href="#">
<button type="button"
class="btn btn-default">
MESSAGES
<span class="badge badge-pill badge-warning">
2
</span>
</button>
</a>
<br>
<br>
<a href="#">
<button type="button"
class="btn btn-info">
UPDATES
<span class="badge badge-pill badge-danger">
2
</span>
</button>
</a>
<br>
<br>
<a href="#">
<button type="button"
class="btn btn-light">
NEWS
<span class="badge badge-pill badge-success">
2
</span>
</button>
</a>
</div>
</body>
</html>
|
Output:
Breadcrumbs:
It is used to indicate the current page location with a navigational hierarchy. It adds separators automatically using CSS. It provides a backlink to each previous page the user navigates through.
Example 1:
HTML
<!DOCTYPE html>
<html>
<head>
<title>badge example</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="container">
<nav aria-label="breadcrumb" role="navigation">
<ol class="breadcrumb">
<li class="breadcrumb-item active"
aria-current="page">
GeeksforGeeks
</li>
</ol>
</nav>
</div>
</body>
</html>
|
Output:
Example 2:
HTML
<!DOCTYPE html>
<html>
<head>
<title>badge example</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="container">
<nav aria-label="breadcrumb" role="navigation">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">
GeeksforGeeks
</a>
</li>
<li class="breadcrumb-item active"
aria-current="page">
Library
</li>
</ol>
</nav>
</div>
</body>
</html>
|
Output:
Example 3:
HTML
<!DOCTYPE html>
<html>
<head>
<title>badge example</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="container">
<nav aria-label="breadcrumb" role="navigation">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">
GeeksforGeeks
</a>
</li>
<li class="breadcrumb-item">
<a href="#">
Library
</a>
</li>
<li class="breadcrumb-item">
<a href="#">
Books
</a>
</li>
<li class="breadcrumb-item">
<a href="#">
Subject
</a>
</li>
<li class="breadcrumb-item active"
aria-current="page">
Computer Science
</li>
</ol>
</nav>
</div>
</body>
</html>
|
Output:
Supported Browser:
- Google Chrome
- Microsoft Edge
- Firefox
- Opera
- Safari