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>


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com



    Post your comments , suggestion , error , requirements etc here .







    Most Popular JQuery Scripts

    1

    Two dependant list boxes

    2

    Calendar with Date Selection

    3

    Data change by Slider

    4

    Show & Hide element


    JQuery Video Tutorials




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer