1.

Add Badges to List Groups in Bootstrap

Answer»

To add badges to List Groups in Bootstrap, you NEED to add the following in <li class = "list-group-item">:

<span class = "BADGE">

Let us now add:

<ul class = "list-group">    <li class = "list-group-item"><span class = "badge">New</span>ONE</li>    <li class = "list-group-item"><span class = "badge">New</span>Two</li>    <li class = "list-group-item"><span class = "badge">New</span>Three</li>    <li class = "list-group-item"><span class = "badge">New</span>Four</li>   <li class = "list-group-item"><span class = "badge">New</span>Five</li> </ul>

The following is an EXAMPLE:

<!DOCTYPE html> <html> <head>    <title>Try v1.2 Bootstrap Online</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> <DIV class="container">   <h2>Add Badges to List Groups</h2>   <ul class = "list-group">     <li class = "list-group-item"><span class = "badge">New</span>One</li>     <li class = "list-group-item"><span class = "badge">New</span>Two</li>     <li class = "list-group-item"><span class = "badge">New</span>Three</li>     <li class = "list-group-item"><span class = "badge">New</span>Four</li>     <li class = "list-group-item"><span class = "badge">New</span>Five</li>   </ul> </div> </body> </html>

The output:



Discussion

No Comment Found