- 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>
Advertisements