Bootstrap List Groups, Basic List Group, Active State List Group, Disabled Item List Group, List Group With Linked Items, Contextual Classes List Group, Contextual Classes with Link items. Bootstrap List Group Classes

Bootstrap List Groups

As a web designer we always need list groups to make item list. Bootstrap provide best solution to make your item list looks good and stylish way. So in this article i am going to tech you how you can make your item list beautiful.

Basic List Group

Basic list item is simple unordered list with their list items. To create basic list item group use <ul> element with class .list-group and then inside <ul> use <li> element as we used before but use .list-group-item bootstrap class inside <li> element.

Example:- 

<h2>Basic List Group</h2>
                   
 <ul class="list-group">
  <li class="list-group-item">item-1</li>
  <li class="list-group-item">item-2</li>
  <li class="list-group-item">item-3</li>
  <li class="list-group-item">item-4</li>
</ul>

Active State List Group

To create using active state list group you have to add .active class in your <li> element. By using that class your item will look with background color.

Example:- 

<h2>Active State List Group</h2>
                   
 <ul class="list-group">
  <li class="list-group-item active">item-1</li>
  <li class="list-group-item">item-2</li>
  <li class="list-group-item">item-3</li>
  <li class="list-group-item">item-4</li>
</ul>

Disabled Item List Group

If you want to disable any of your item from list group then you can use .disabled bootstrap class in your <li> element.

Example:- 

<h2>Disabled Item List Group</h2>
                   
 <ul class="list-group">
  <li class="list-group-item disabled">item-1</li>
  <li class="list-group-item">item-2</li>
  <li class="list-group-item">item-3</li>
  <li class="list-group-item">item-4</li>
</ul>

List Group With Linked Items

Sometimes we need list item with hyper link. To create hyper link on item list you have to use <div> instead of <ul> and <a> instead of <li> with .list-group-item-action class.

Example:-

<h2>List Group With Linked Items</h2>
                   
 <div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">item-1</a>
  <a href="#" class="list-group-item list-group-item-action">item-2</a>
  <a href="#" class="list-group-item list-group-item-action">item-3</a>
  <a href="#" class="list-group-item list-group-item-action">item-3</a>
</div>

Contextual Classes List Group

If you want to show you list item in different text color this is called contextual. To make your list item colorfull you have to use some bootstrap classes.

Example:- 

<h2>Contextual Classes List Group</h2>
                   
 <ul class="list-group">
  <li class="list-group-item list-group-item-success">Success item</li>
  <li class="list-group-item list-group-item-secondary">Secondary item</li>
  <li class="list-group-item list-group-item-info">Info item</li>
  <li class="list-group-item list-group-item-warning">Warning item</li>
  <li class="list-group-item list-group-item-danger">Danger item</li>
  <li class="list-group-item list-group-item-primary">Primary item</li>
  <li class="list-group-item list-group-item-dark">Dark item</li>
  <li class="list-group-item list-group-item-light">Light item</li>
</ul>

Contextual Classes with Link items

You can make your item list color full with hyper link.

Example:- 

<h2>Contextual Classes with Link items</h2>
                   
 <div class="list-group">
  <a href="#" class="list-group-item list-group-item-action">Action item</a>
  <a href="#" class="list-group-item list-group-item-success">Success item</a>
  <a href="#" class="list-group-item list-group-item-secondary">Secondary item</a>
  <a href="#" class="list-group-item list-group-item-info">Info item</a>
  <a href="#" class="list-group-item list-group-item-warning">Warning item</a>
  <a href="#" class="list-group-item list-group-item-danger">Danger item</a>
  <a href="#" class="list-group-item list-group-item-primary">Primary item</a>
  <a href="#" class="list-group-item list-group-item-dark">Dark item</a>
  <a href="#" class="list-group-item list-group-item-light">Light item</a>
</div>