Bootstrap Badges
Badges are numerical information associated with an element.For example how many times a button has clicked ,how many item are associated with the an element.
"badge" class are used for this purpose.Generally element is used to create badges.
Example
A Badges can be placed inside of other element.
Example
Contextual Badges
You can change the color of a badge using contextual classes.
Example
Output
Labels
Labels are used to display some text about something.You can change the color of a Label using contextual classes.
Example
Badges are numerical information associated with an element.For example how many times a button has clicked ,how many item are associated with the an element.
"badge" class are used for this purpose.Generally element is used to create badges.
Example
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<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>
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="container">
<h2>
Badges</h2>
<a
href="#">Like
<span
class="badge">6</span></a><br>
<a
href="#">Visited
<span
class="badge">10</span></a><br>
<a
href="#">Angry
<span
class="badge">12</span></a>
</div>
</body>
</html>
Output
A Badges can be placed inside of other element.
Example
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<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>
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="container">
<button
type="button"
class="btn
btn-primary"><span
class="badge">6</span></button>
</div>
</body>
</html>
Output
Contextual Badges
You can change the color of a badge using contextual classes.
Example
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/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>
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="container">
<span
class="badge
badge-primary">6</span>
<span
class="badge
badge-secondary">6</span>
<span
class="badge
badge-success">6</span>
<span
class="badge
badge-danger">6</span>
<span
class="badge
badge-primary">6</span>
<span
class="badge
badge-warning">6</span>
<span
class="badge
badge-info">6</span>
<span
class="badge
badge-light">6</span>
<span
class="badge
badge-dark">6</span>
</div>
</body>
</html>
6
6
6
6
6
6
6
6
6
Labels
Labels are used to display some text about something.You can change the color of a Label using contextual classes.
Example
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<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>
<meta
name="viewport"
content="width
= device-width, initial-scale = 1">
<body>
<div
class="container">
<h1><span
class="label">Label</span></h1>
<h1><span
class="label
label-default">Default</span></h1>
<h1><span
class="label
label-primary">Primary</span></h1>
<h1><span
class="label
label-success">Success</span></h1>
<h1><span
class="label
label-info">Info</span></h1>
<h1><span
class="label
label-warning">Warning</span></h1>
<h1><span
class="label
label-danger">Danger</span></h1>
</div>
</body>
</html>
Output
