In this article we will learn about Bootstrap List Group component. It is useful for displaying lists of elements with different styles on web pages.

Basic List Groups

The basic list group is an like unordered list with list items for creating Basic List Group use class .list-group to <ul> element, and i to <li> elements.

Example 1: Basic List Groups

In this example first we will create a <div> with class .container then for Basic List Group, we will add <ul> element with class .list-group and inside this we will add <li> elements with class .list-group-item in this we will add elements of list.

Lets create Basic List Group by writing following code and see output.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap Part10</title>

<meta name="viewport" content="width=device-width,initial-scale=1">

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

</head>

<body>

<div class="container">

<h3>Basic Bootstrap List Group</h3>

<p>FOOD CATEGORY</p>

<ul class="list-group">

<li class="list-group-item">SWEETS</li>

<li class="list-group-item">SNACKS</li>

<li class="list-group-item">MISE</li>

<li class="list-group-item">REGIONAL</li>

<li class="list-group-item">BAKING</li>

</ul>

</div>

<script src="js/jquery-2.1.4.min.js"></script>

<script src="js/bootstrap.min.js"></script>

</body>

</html>

Output

List Group With Badges

We can add badges to a list group item, badges will automatically be positioned on the right. For creating badge component create a <span> element with class .badge within the list item.

Example 2 : List Group With Badges

In this example we will create List Group With Badges in this we will add <ul> element with class .list-group and inside this we will add <li> elements with class .list-group-item,within list item we will add <span class="badge"> and see output by writing following code.

We can hyperlink list group items,we need to use <div> element instead of <ul> and anchor tag <a> instead of <li>.

Example 3 : List Group With Linked Items

In this example instead of <ul> we will create a <div> with class .list-group then instead of <li> we will add <a> tag with class .list-group-item and within this we will write item of list.by writing following code.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap Part10</title>

<meta name="viewport" content="width=device-width,initial-scale=1">

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

</head>

<body>

<div class="container">

<h3>Bootstrap List Group With Linked Items</h3>

<p>MENU</p>

<div class="list-group">

<a href="#"class="list-group-item">Home</a>

<a href="#"class="list-group-item">Profile</a>

<a href="#"class="list-group-item">Settings</a>

<a href="#"class="list-group-item">Help</a>

</div>

</div>

<script src="js/jquery-2.1.4.min.js"></script>

<script src="js/bootstrap.min.js"></script>

</body>

</html>

Output

Active State and Disabled Item In List Group

Bootstrap provides Active State and Disabled Item features, we can highlight the current item by using .active class, to disable an item in list group we need to add .disabled class.

Ecample 4 : Active State and Disabled Item

In this example we will create List Group with linked items,now we will add class .active to a List Group Item for highlighting the current item.

Now we will add .disabled class to a List Group Item for disable an item in List Group.

Lets create example of Active State and Disabled Item In List Group by writing following code.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap Part10</title>

<meta name="viewport" content="width=device-width,initial-scale=1">

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

</head>

<body>

<div class="container">

<h3>Bootstrap List Group Active State and Disabled Item</h3>

<p>MENU</p>

<div class="list-group">

<!-- List Group Item withclass .active -->

<a href="#"class="list-group-item active">Home</a>

<a href="#"class="list-group-item">Profile</a>

<!-- List Group Item withclass .disabled -->

<a href="#"class="list-group-item disabled">Settings</a>

<a href="#"class="list-group-item">Help</a>

</div>

</div>

<script src="js/jquery-2.1.4.min.js"></script>

<script src="js/bootstrap.min.js"></script>

</body>

</html>

Output

List Group with Contextual Classes

We can use contextual classes on the list group items to color list items. The Contextual Classes we used for

coloring list-items as:

.list-group-item-info

.list-group-item-success

.list-group-item-warning

.list-group-item-danger

Example 5:List Group with Contextual Classes

In this example we will create List Group using Contextual Classes to list group items by writing following code:

We can add any HTML element inside a list group item like headings and paragraph for this we need to use

classes .list-group-item-heading and .list-group-item-text.

Example 6:List Group With Custom Content

In this example we will create List Group with linked items then inside list group item we will add heading with class .list-group-item-heading and paragraph with class .list-group-item-text and see output by writing following code.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap Part10</title>

<meta name="viewport" content="width=device-width,initial-scale=1">

<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">

</head>

<body>

<div class="container">

<h3>Bootstrap List Group With Custom Content</h3>

<div class="list-group">

<a href="#"class="list-group-item active">

<!--Heading withclass .list-group-item-heading-->

<h4 class="list-group-item-heading">List Group Item Heading-1</h4>

<!--Paragraph withclass .list-group-item-text -->

<p class="list-group-item-text">List Group Text Goes Here...</p>

</a>

<a href="#"class="list-group-item">

<h4 class="list-group-item-heading">List Group Item Heading-2</h4>

<p class="list-group-item-text">Hello C# Corner</p>

</a>

<a href="#"class="list-group-item">

<h4 class="list-group-item-heading">List Group Item Heading-3</h4>

<p class="list-group-item-text">Bootstrap List Group</p>

</a>

<a href="#"class="list-group-item">

<h4 class="list-group-item-heading">List Group Item Heading-4</h4>

<p class="list-group-item-text">Start Learning Bootstrap Today</p>

</a>

</div>

</div>

<script src="js/jquery-2.1.4.min.js"></script>

<script src="js/bootstrap.min.js"></script>

</body>

</html>

Output

In this article we focused on Bootstrap List Groups. Then in next articles we will understand all the components of Bootstrap step by step.