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

<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

<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>
Your Rating




Google+

Post Comment This is for short comments only. Use the forum for more discussions.







Most Popular JQuery Scripts

1

Two dependant list boxes

2

Calendar with Date Selection

3

Data change by Slider

4

Show & Hide element
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us
©2000-2018 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer