Create simple list group with badges using Bootstrap classes in HTML,PHP

How to make vertical responsive category/tags with showing number of posts including.

Here list group with badges means some times on a technical or blogging website they have multiple number of post including multiple category so for quick help to its user they just showing number of post inside a particular category at the front of category/Tag name . This will help the website user most because before opening that category they will know what amount of post inside it. So here is the complete step by step tutorial for Create simple list group with badges using Bootstrap classes in HTML,PHP.

How to Create simple list group with badges using Bootstrap classes in HTML,PHP.

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

Code for list-group-with-badges.html file.

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<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> List Groups </h2>


<ul class="list-group">
 <li class="list-group-item"><span class="badge">5</span>Android</li>
 <li class="list-group-item"><span class="badge">6</span>PHP</li>
 <li class="list-group-item"><span class="badge">7</span>Blogger</li>
 <li class="list-group-item"><span class="badge">8</span>WordPress</li>
 </ul>

</div>

</body>
</html>

Screenshot :

Create simple list group with badges using Bootstrap

Leave a Reply

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