Bootstrap | Badges and Breadcrumbs
Last Updated :
29 Apr, 2022
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=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/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.0/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/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.0/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</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=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/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.0/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js">
</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=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</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=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</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=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</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
Similar Reads
BootStrap Introduction and Installation To begin Web development you may go through this article first. Grid SystemButtons, Glyphicons, TablesVertical Forms, Horizontal Forms, Inline FormsDropDowns and Responsive TabsProgress Bar and JumbotronBootstrap is a free and open-source collection of tools for creating websites and web application
4 min read
Bootstrap Grid System Introduction and Installation Buttons, Glyphicons, Tables Vertical Forms, Horizontal Forms, Inline Forms DropDowns and Responsive Tabs Progress Bar and Jumbotron Prerequisites: Web Development Basics and  BootStrap (Part-1) Grid System: In the previous article we had learnt about Bootstrap and its I
7 min read
Bootstrap Buttons, Glyphicons, Tables After the previous article, one should be familiar with the Grid System of Bootstrap. Now, we'll learn about making Buttons, the all-new Glyphicons and Tables. Let's get started.Bootstrap ButtonsBootstrap buttons provide a quick way to create consistent and responsive buttons using predefined classe
3 min read
Bootstrap Forms Alignment Types Bootstrap Forms are pre-styled HTML forms provided by the Bootstrap framework. They streamline the process of creating aesthetically pleasing and responsive forms by offering a range of ready-to-use components, layouts, and styles, ensuring consistency and efficiency in web development. Bootstrap Fo
3 min read
Bootstrap DropDowns and Responsive Tabs Introduction and InstallationGrid SystemButtons, Glyphicons, TablesVertical Forms, Horizontal Forms, Inline FormsProgress Bar and Jumbotron Dropdown Menu Using Bootstrap: In bootstrap, dropdowns are created using the class="dropdown". What we will do is create a button and then convert the button in
3 min read
Bootstrap Progress Bar and Jumbotron BootStrap articles : Introduction and Installation Grid System Buttons, Glyphicons, Tables Vertical Forms, Horizontal Forms, Inline Forms DropDowns and Responsive Tabs Progress Bar We all have seen a progress bar while executing some process in our computer. A progress bar shows how much of the proc
2 min read
Bootstrap Alerts , Wells, Pagination and Pager Introduction and InstallationGrid SystemButtons, Glyphicons, TablesVertical Forms, Horizontal Forms, Inline FormsDropDowns and Responsive TabsProgress Bar and Jumbotron Alerts: We often see certain alerts on some websites before or after completing an action. These alert messages are highlighted tex
4 min read
Bootstrap Badges, Labels, Page Headers Introduction and InstallationButtons, Glyphicons, TablesVertical Forms, Horizontal Forms, Inline FormsDropDowns and Responsive TabsProgress Bar and Jumbotron Badges: We all have seen some numerical indicators beside some links on various websites. These are called badges. These badges tell how many
3 min read
Bootstrap Tooltips In this article, we would be discussing the tooltip plugin provided by bootstrap. Tooltip is quite useful for showing the description of different elements in the webpage. Tooltip can be invoked on any element in a webpage. Tooltips on bootstrap depends on the 3rd party library Tether for positionin
4 min read
Bootstrap Navigation Bar Bootstrap Navigation Bar provides a responsive, customizable, and pre-styled navigation component for web applications. It incorporates features like branding, navigation links, dropdowns, and responsiveness, enabling developers to create effective and visually appealing navigation menus effortlessl
6 min read