Bootstrap list

Simple List using class='list-group' and class='list-group-item'

PHP Script
MYSQL database
JQuery

<ul class='list-group'>
  <li class='list-group-item'>PHP Script</li>
  <li class='list-group-item'>MYSQL database</li> 
  <li class='list-group-item'>JQuery</li> 
</ul>

With one item disabled , class='list-group-item disabled'

PHP Script
MYSQL database
JQuery

<ul class='list-group'>
  <li class='list-group-item'>PHP Script</li>
  <li class='list-group-item disabled'>MYSQL database</li> 
  <li class='list-group-item'>JQuery</li> 
</ul>

With one active list , class='list-group-item active'

plu2net Sections
PHP Script
MYSQL database
JQuery

List with Links and class='list-group-item'

Instead of using <UL> </UL> tag we can use <DIV> </DIV> tag as list and <a href></a> as <LI></LI>

plu2net Sections PHP Script MYSQL database JQuery

<div class='list-group'>
<a href='#' class='list-group-item active'>plu2net Sections</a>
  <a href='../php_tutorial/site_map.php' class='list-group-item'>PHP Script</a>
  <a href=../sql_tutorial/site_map.php class='list-group-item'>MYSQL database</a> 
  <a href=site_map.php class='list-group-item'>JQuery</a> 
</div>

Alligning at right by using class=pull-right

We can use pull-left also for left alligning the list.

plu2net Sections PHP script MYSQL JQuery

<div class='pull-right'>
<div class='list-group'>
<a href='#' class='list-group-item active'>plu2net Sections</a>
  <a href='../php_tutorial/site_map.php' class='list-group-item'>PHP Script</a>
  <a href=../sql_tutorial/site_map.php class='list-group-item'>MYSQL database</a> 
  <a href=site_map.php class='list-group-item'>JQuery</a> 
</div>
</div>

List with Badges

plu2net Mails Inbox 52 Sent Mail 75 Outbox 2

<div class='list-group'>
<a href='#' class='list-group-item active'>plu2net Mails</a>
  <a href='#' class='list-group-item'>Inbox <span class='badge'>52</span></a>
  <a href='#' class='list-group-item'>Sent Mail <span class='badge'>75</span></a> 
  <a href='#' class='list-group-item'>Outbox <span class='badge'>2</span></a> 
</div>

List with width matching to width of text

plu2net Sections PHP Script MYSQL database JQuery

<style>
.my_width{
 display:inline-block; // width will match width of text
 } 
</style>

<div class='list-group my_width'>
<a href='#' class='list-group-item active'>plu2net Sections</a>
  <a href='../php_tutorial/site_map.php' class='list-group-item'>PHP Script</a>
  <a href=../sql_tutorial/site_map.php class='list-group-item'>MYSQL database</a> 
  <a href=site_map.php class='list-group-item'>JQuery</a> 
</div>

Managing Width of all list with class='list-group'

<style>
 .list-group{
  width:150px;
 }</style>

This article is written by plus2net.com team.

plus2net.com

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element

Bootstrap List