Bootstrap List Groups

Bootstrap list groups display related items, links, actions and badges.

Basic List Group Top ↑

<ul class="list-group">
  <li class="list-group-item">Inbox</li>
  <li class="list-group-item">Sent Mail</li>
  <li class="list-group-item">Outbox</li>
</ul>

Active and Disabled Items Top ↑

<div class="list-group">
  <a class="list-group-item list-group-item-action active" href="#">Inbox</a>
  <a class="list-group-item list-group-item-action" href="#">Sent</a>
  <a class="list-group-item list-group-item-action disabled" href="#">Outbox</a>
</div>

Badge Count Top ↑

<li class="list-group-item d-flex justify-content-between align-items-center">
  Inbox
  <span class="badge badge-primary badge-pill">52</span>
</li>

Original Source Examples Retained for Migration Reference Top ↑

Original example 1

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

Original example 2

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

Original example 3

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

Original example 4

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

Original example 5

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

Original example 6

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

Original example 7

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

Additional Original Learning Routes Top ↑

• bs-well.php

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: