- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Add badges component to Bootstrap list group item
Add the badges component to any list group item and it will automatically be positioned on the right. Just add <span class = "badge"> within the <li> element.
You can try to run the following code to implement this
Example
<!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <link href = "/bootstrap/css/bootstrap.min.css" rel =" stylesheet"> <script src = "/scripts/jquery.min.js"></script> <script src = "/bootstrap/js/bootstrap.min.js"></script> </head> <body> <h3>Tutorials</h3> <ul class = "list-group"> <li class = "list-group-item">Programming</li> <li class = "list-group-item">Web Development</li> <li class = "list-group-item">Networking</li> <li class = "list-group-item"> <span class = "badge">New</span> Database </li> <li class = "list-group-item">SAP</li> <li class = "list-group-item"> <span class = "badge">New</span> Academic </li> </ul> </body> </html>
- Related Articles
- Bootstrap list-group-item class
- Add a background color to the active list item in a Bootstrap list group
- Disable a list item in a Bootstrap list group
- Item text inside the list group in Bootstrap
- Add HTML Content to Bootstrap List Group
- Bootstrap Badges
- How to add badge to list group in Bootstrap?
- Set success action for a list item in a list group with Bootstrap
- Set warning action for a list item in a list group with Bootstrap
- Set danger action for a list item in a list group with Bootstrap
- Set important information for a list item in a list group with Bootstrap
- Set Bootstrap badges in active states of list navigation
- Bootstrap Collapsible list group
- Bootstrap list-group class
- Link Bootstrap List Group Items
Advertisements