Create badges using Bootstrap classes in HTML,PHP

How to show number of items associated with single link with bootstrap classes in numeric digit.

Badges are used to display number of items associated with single link just after the link into numeric digits. For example suppose we have a category with 10 posts then just after the category link it will show us the number of post inside that particular category that number are shows are called as Badges. So here is the complete step by step tutorial for Create badges using Bootstrap classes in HTML,PHP.

How to Create badges using Bootstrap classes in HTML,PHP.

https://www.android-examples.com/demo/heading-tag.html

Code for badges.html file.

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Badges</title>
<title>Split DropDown Buttons</title>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">
 
 <h2>Links with Badges</h2>
 <a href="#">Android Examples <span class="badge">10</span></a><br>
 <a href="#">Bootstrap Examples <span class="badge">12</span></a><br>
 <a href="#">PHP Examples <span class="badge">14</span></a>
 
</div>

</body>
</html>

Screenshot:

Create badges using Bootstrap classes in HTML,PHP

Leave a Reply

Your email address will not be published. Required fields are marked *