7+ Bootstrap Badge Examples

This post contains a total of 7+ Bootstrap Badge Examples with Source Code. All these Badges are made using Bootstrap.

You can use the source code of these examples with credits to the original owner.

Related Posts

Bootstrap Badge Examples

1. Custom Bootstrap Badge

Made by Ufuk. Source

Custom Bootstrap Badge
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css'>
<style>
.btn{
  font-size:18px;
}
.btn .badge{
  margin-left:10px;
  border-radius:50%;
  background-color:white;
  font-size:18px;
}
.btn-primary .badge{
  color:#0d6efd;
}
.btn-success .badge{
  color:#198754;
}
.btn-danger .badge{
  color:#dc3545;
}
</style>
</head>
<body>
  <button type="button" class="btn btn-primary">
  Notifications <span class="badge ">4</span>
</button>
<button type="button" class="btn btn-success">
  Notifications <span class="badge">4</span>
</button>
<button type="button" class="btn btn-danger">
  Notifications <span class="badge">4</span>
</button>
</body>
</html>

2. Badges for programming languages & tools

Made by Rajan Lad. Source

Badges for programming languages & tools
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body
{
  background-color:rgb(23,23,23);
}

.container
{
  display:flex;
  justify-content:center;
  background-color:rgb(23,23,23);
  color:white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.sub-container
{
  width:55%;
  height:max-content;
  background-color:rgb(23,23,23);
  display:flex;
  justify-content:left;
  align-items:center;
  flex-wrap: wrap; 
  color:black;
}

.badge
{
  width:max-content;
  height:30px;
  background-color:white;
  border-radius:25px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:2px;
  margin-right:15px;
  padding-right:10px;
  margin:10px;
}

.icons
{
  width:30px;
  height:30px;
  background-color:black;
  border-radius:20px;
  margin-right:10px;
  background-color:rgb(23,23,23);
  
  background-size:25px 25px;
  background-repeat:no-repeat;
  background-position: center;
}

#java-icon
{
background-image:url('https://rajanlabs.000webhostapp.com/assets/java.svg');

}
#android-icon
{
background-image:url('https://rajanlabs.000webhostapp.com/assets/shapes-and-symbols.svg');
}

#firebase-icon
{
background-image:url('https://rajanlabs.000webhostapp.com/assets/icons8-firebase.svg');
}

#rxjava-icon
{
background-image:url('https://rajanlabs.000webhostapp.com/assets/rxjava.svg');
}

#retrofit-icon
{
background-size:20px 20px;
background-image:url('https://rajanlabs.000webhostapp.com/assets/square.svg');
}

#dagger-icon
{
background-size:25px 25px;
background-image:url('https://rajanlabs.000webhostapp.com/assets/dagger.svg');
}

#figma-icon
{
background-size:25px 25px;
background-image:url('https://rajanlabs.000webhostapp.com/assets/icons8-figma.svg');
}

#sqllite-icon
{
background-size:20px 20px;
background-image:url('https://rajanlabs.000webhostapp.com/assets/sqllite.svg');
}

#bluetooth-icon
{
background-size:20px 20px;
background-image:url('https://rajanlabs.000webhostapp.com/assets/bluetooth.svg');
}

#realm-icon
{
background-size:20px 20px;
background-image:url('https://rajanlabs.000webhostapp.com/assets/realm.svg');
}

#html5-icon
{
background-size:20px 20px;
background-image:url('https://rajanlabs.000webhostapp.com/assets/html-5.svg');
}

#css-icon
{
background-size:20px 20px;
background-image:url('https://rajanlabs.000webhostapp.com/assets/css.svg');
}

#bootstrap-icon
{
background-size:25px 25px;
background-image:url('https://rajanlabs.000webhostapp.com/assets/bootstrap.svg');
}

#javascript-icon
{
background-image:url('https://rajanlabs.000webhostapp.com/assets/javascript.svg');
}

#flex-icon
{
background-size:20px 20px;
background-image:url('https://rajanlabs.000webhostapp.com/assets/flex.svg');
}

#php-icon
{
background-image:url('https://rajanlabs.000webhostapp.com/assets/php.svg');
}

#postman-icon
{
background-image:url('https://rajanlabs.000webhostapp.com/assets/postman.svg');
}

#trello-icon
{
background-color:white;
background-image:url('https://rajanlabs.000webhostapp.com/assets/trello.svg');
}

#python-icon
{
background-image:url('https://rajanlabs.000webhostapp.com/assets/python.svg');
}
</style>
</head>
<body>
  <section class=container>
  <h1>Round Rectangular Badges</h1>
<section class="sub-container">
  <div class="badge" id="java-badge">
    <div class="icons" id="java-icon">
    </div>
    <h4>Java</h4>
  </div>
  <div class="badge" id="android-badge">
    <div class="icons" id="android-icon">
    </div>
    <h4>Android</h4>
  </div>
  <div class="badge" id="firebase-badge">
    <div class="icons" id="firebase-icon">
    </div>
    <h4>Firebase</h4>
  </div>
  <div class="badge" id="rxjava-badge">
    <div class="icons" id="rxjava-icon">
    </div>
    <h4>RXJava</h4>
  </div>
  <div class="badge" id="retrofit-badge">
    <div class="icons" id="retrofit-icon">
    </div>
    <h4>Retrofit</h4>
  </div>
  <div class="badge" id="dagger-badge">
    <div class="icons" id="dagger-icon">
    </div>
    <h4>Dagger</h4>
  </div>
  <div class="badge" id="figma-badge">
    <div class="icons" id="figma-icon">
    </div>
    <h4>Figma</h4>
  </div>
  <div class="badge" id="sqllite-badge">
    <div class="icons" id="sqllite-icon">
    </div>
    <h4>SQLLite</h4>
  </div>
  <div class="badge" id="bluetooth-badge">
    <div class="icons" id="bluetooth-icon">
    </div>
    <h4>Bluetooth</h4>
  </div>
  <div class="badge" id="realm-badge">
    <div class="icons" id="realm-icon">
    </div>
    <h4>Realm</h4>
  </div><div class="badge" id="html5-badge">
  <div class="icons" id="html5-icon">
    </div>
    <h4>HTML 5</h4>
  </div>
  <div class="badge" id="css-badge">
    <div class="icons" id="css-icon">
    </div>
    <h4>CSS</h4>
  </div>
  <div class="badge" id="bootstrap-badge">
    <div class="icons" id="bootstrap-icon">
    </div>
    <h4>Bootstrap</h4>
  </div>
  <div class="badge" id="javascript-badge">
    <div class="icons" id="javascript-icon">
    </div>
    <h4>Javascript</h4>
  </div>
  <div class="badge" id="flex-badge">
    <div class="icons" id="flex-icon">
    </div>
    <h4>Flex</h4>
  </div>
  <div class="badge" id="php-badge">
    <div class="icons" id="php-icon">
    </div>
    <h4>PHP</h4>
  </div>
  <div class="badge" id="postman-badge">
    <div class="icons" id="postman-icon">
    </div>
    <h4>Postman</h4>
  </div>
  <div class="badge" id="trello-badge">
    <div class="icons" id="trello-icon">
    </div>
    <h4>Trello</h4>
  </div>
  <div class="badge" id="python-badge">
    <div class="icons" id="python-icon">
    </div>
    <h4>Python</h4>
  </div>
  <br>
    <div class="badge" id="python-badge">
  <a target="_blank" href="https://icons8.com/icons/set/firebase">Firebase icon </a> icon by <a target="_blank" href="https://icons8.com">Icons8</a>
</div>
<br>
<div class="badge" id="python-badge">
<a target="_blank" href="https://icons8.com/icons/set/figma">Figma icon </a> icon by <a target="_blank" href="https://icons8.com">Icons8</a>
  </div>
  <div class="badge" id="python-badge">
other icons by <a target="_blank" href="https://www.flaticon.com/"> flaticon</a>
  </div>
</section>
</section>
</body>
</html>

3. Bootstrap badge component

Made by Eliska Klimtova. Source

Bootstrap badge component
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title> 
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>  
<style>
/* regular - font-weight: 400 */
@font-face {
  font-family: "Proxima";
  src: url("https://static3.avast.com/10001188/web/o/f/400/proximanova-regular-webfont.woff2") format("woff2"), url("https://static3.avast.com/10001188/web/o/f/400/proximanova-regular-webfont.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
/* bold - font-weight: 700 */
@font-face {
  font-family: "Proxima";
  src: url("https://static3.avast.com/10001188/web/o/f/700/proximanova-bold-webfont.woff2") format("woff2"), url("https://static3.avast.com/10001188/web/o/f/700/proximanova-bold-webfont.woff") format("woff");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
/* Badge */
.badge {
  font-family: Proxima;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.badge-primary {
  background-color: rgba(78, 34, 208, 0.1);
  color: #4e22d0;
}

.badge-secondary {
  background-color: rgba(255, 120, 0, 0.1);
  color: #ff7800;
}

/* Size modifications */
.badge-m {
  font-size: 13px;
  padding: 8px 16px;
}

.badge-s {
  font-size: 11px;
  padding: 5px 12px;
}

.badge-xs {
  font-size: 11px;
  padding: 3px 8px;
}

/* Tag */
.badge-pill {
  background-color: #e9e8f3;
  color: rgba(38, 28, 106, 0.7);
  padding: 10px 16px;
}
.badge-pill:hover {
  background-color: #514988 !important;
  color: #fff;
}
.badge-pill:focus {
  background-color: #514988 !important;
  color: #fff;
}

/* Layout */
.wrap {
  display: flex;
  font-family: Proxima;
  margin: 5% 0 0 15%;
}

h2 {
  margin-bottom: 40px;
  color: #261c6a;
  font-weight: 700;
}
</style>
</head>
<body>
  <div class="wrap">

  <div class="container">
    <h2>Primary Badge</h2>
    <p>Primary M <span class="badge badge-primary badge-m">Label</span></p>
    <p>Primary S <span class="badge badge-primary badge-s">Label</span></p>
    <p>Primary XS <span class="badge badge-primary badge-xs">Label</span></p>
  </div>

  <div class="container">
    <h2>Secondary Badge</h2>
    <p>Secondary M <span class="badge badge-secondary badge-m">Label</span></p>
    <p>Secondary S <span class="badge badge-secondary badge-s">Label</span></p>
    <p>Secondary XS <span class="badge badge-secondary badge-xs">Label</span></p>
  </div>

  <div class="container">
    <h2>Tag</h2>
    <a href="#" class="badge badge-pill badge-primary">Tag name</a>
  </div>
</div>
</body>
</html>

4. Simple Bootstrap Badge

Made by Sumit. Source

Simple Bootstrap Badge
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Red+Hat+Display:400,500,700|Red+Hat+Text:400,500,700&display=swap" rel="stylesheet">
<link href="https://unpkg.com/[email protected]/dist/css/ionicons.min.css" rel="stylesheet">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<style>
.rh-display {
  font-family: 'Red Hat Display', sans-serif;
}

.rh-text {
  font-family: 'Red Hat Text', sans-serif;
}

div {
  margin: 1rem auto;
  width: 900px;
}

.op-badge {
    font-family: 'Red Hat Text', sans-serif;
  font-weight: 100;
  border: 1px solid #ddd;
  background: #f5f5f5;
}
</style>
</head>
<body>
  <div>
  <h1>Bootstrap Badge</h1>
  <span class="badge badge-primary">Primary</span>
  <span class="badge badge-secondary">Secondary</span>
  <span class="badge badge-success">Success</span>
  <span class="badge badge-danger">Danger</span>
  <span class="badge badge-warning">Warning</span>
  <span class="badge badge-info">Info</span>
  <span class="badge badge-light">Light</span>
  <span class="badge badge-dark">Dark</span>
  <hr/>
  <h1>Custome badge</h1>
  <span class="badge op-badge">+&nbsp;09</span>  
  <span class="badge op-badge">+ 09</span>
</div>
</body>
</html>
 

5. Bootstrap Badge

Made by Jaychen. Source

Bootstrap Badge
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/949620c8ad.js" crossorigin="anonymous"></script>
</head>
<body>
  <div class="container">
  <h1 class="display-3 text-center">badges!</h1>
  <h3 class="dsiplay-4">Inbox <span class="badge badge-primary">49</span></h3>
  <h3 class="dsiplay-4">Inbox <span class="badge badge-secondary">49</span></h3>
  <h3 class="d-flex justify-content-between">Inbox <span class="badge badge-warning badge-pill">49</span></h3>
  <button class="btn-info btn">Profile <span class="badge badge-light">73</span></button>
</div>

<div class="container">
  <h1 class="display-3 text-center">Button Groups</h1>
  <div class="btn-group" role="group">
    <div class="btn btn-primary">First</div>
   <div class="btn btn-info">Second</div>
   <div class="btn btn-success">Third</div>  
  </div>
  
  <h3>Toolbars</h3>
  <div class="btn-toolbar my-2 justify-content-center" role="toolbar">
     <div class="btn-group mr-2" role="group">
      <div class="btn btn-primary">First</div>
      <div class="btn btn-info">Second</div>
      <div class="btn btn-success">Third</div>  
  </div>
  
  <div class="btn-group" role="group">
    <div class="btn btn-primary">First</div>
   <div class="btn btn-info">Second</div>
   <div class="btn btn-success">Third</div>
  </div> 
  </div>
</div>
</body>
</html>

6. CSS Bootstrap Badge Example

Made by SLCC WTCE ID. Source

CSS Bootstrap Badge Example
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css'>
</head>
<body>
<div class="container">
  <h4> This is a new line with a <span class="badge badge-primary">Blue Badge</span>.</h4>
  <h4> This is a new line with a <span class="badge badge-secondary">Grey Badge</span>.</h4>
  <h4> This is a new line with a <span class="badge badge-success">Green Badge</span>.</h4>
  <h4> This is a new line with a <span class="badge badge-warning">Yellow Badge</span>.</h4>
  <h4> This is a new line with a <span class="badge badge-danger badge-pill">Red Oval Badge</span>.</h4>
</div>
</body>
</html>

7. Basic Bootstrap Badge

Made by Nori. Source

Basic Bootstrap Badge
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
</head>
<body>
  <h5>Text<span class="badge badge-primary">NEW!</span></h5>
<button class="btn btn-success">Text<span class="badge badge-pill badge-light">5</span></button>
<br>
<a href="#" class="badge badge-danger">Danger</a>
</body>
</html>

8. Basic Bootstrap Badge

Made by Ronaldo Freitas Dias. Source

Basic Bootstrap Badge
<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
.item {
    position:relative;
    padding-top:20px;
    display:inline-block;
}
.notify-badge{
    position: absolute;
    right:-100px;
    top:10px;
    background:red;
    text-align: center;
    border-radius: 30px 30px 30px 30px;
    color:white;
    padding:5px 10px;
    font-size:20px;
}
</style>
</head>
<body>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-sm-4">
  	<div class="item">
  		<a href="#">
			<span class="notify-badge">NEW</span>
      		<img src="https://placehold.it/200x200" alt="" />
		</a>
	</div>
</div>
</body>
</html>